Examples
Below are a set of UX patterns implemented using Alpine AJAX with minimal HTML and styling.
You can copy and paste them and then adjust them for your needs.
- Toggle Button
- The classic “Like” toggle button.
- Loading Indicator
- Indicate when AJAX requests are processing.
- Inline Edit
- Edit details inline.
- Delete Row
- Delete a row from a table.
- Edit Row
- Edit a table row inline.
- Bulk Update
- Change multiple items in a collection at once.
- Instant Search
- Search or filter a data collection while you type.
- Filterable Content
- Filter down a table or list of content.
- Inline Validation
- Validate an input field before it is submitted.
- Lazy Loading
- Lazily load remote content.
- Dialog (Modal)
- Load remote content in a dialog window.
- Progress Bar
- Indicate the progress of a long running process.
- Infinite Scroll
- Load additional content as the user scrolls.
- Notifications
- Display notification “toasts”.
- Server Events
- Build a comment form experience using server initiated events.
- Dialog (Modal) Form
- Handle forms inside a dialog window.