一个 GitHub 仓库列表,展示与各种服务器端语言和平台的集成示例,包括 JavaScript、Python、Java 等众多语言。
下面是一组使用 htmx 以最少的 HTML 和样式实现的 UX 模式。
你可以复制并粘贴它们,然后根据你的需求调整。
| Pattern | Description |
|---|---|
| Click To Edit | 演示数据对象的内联编辑 |
| Bulk Update | 演示批量更新多行数据 |
| Click To Load | 演示点击加载表格中的更多行 |
| Delete Row | 演示表格中的行删除 |
| Edit Row | 演示如何编辑表格中的行 |
| Lazy Loading | 演示如何懒加载内容 |
| Inline Validation | 演示如何进行内联字段验证 |
| Infinite Scroll | 演示页面的无限滚动 |
| Active Search | 演示活动搜索框模式 |
| Progress Bar | 演示类似作业运行器的进度条 |
| Value Select | 演示使一个 select 的值依赖于另一个 select |
| Animations | 演示各种动画技术 |
| File Upload | 演示如何通过 ajax 上传文件并带有进度条 |
| Preserving File Inputs after Form Errors | 演示如何在表单错误后保留文件输入 |
| Reset User Input | 演示如何在提交后重置表单输入 |
| Dialogs - Browser | 演示 prompt 和 confirm 对话框 |
| Dialogs - UIKit | 演示使用 UIKit 的模态对话框 |
| Dialogs - Bootstrap | 演示使用 Bootstrap 的模态对话框 |
| Dialogs - Custom | 演示从零开始的模态对话框 |
| Tabs (Using HATEOAS) | 演示如何使用 HATEOAS 原则显示和选择选项卡 |
| Tabs (Using JavaScript) | 演示如何使用 JavaScript 显示和选择选项卡 |
| Keyboard Shortcuts | 演示如何为 htmx 启用的元素创建键盘快捷键 |
| Drag & Drop / Sortable | 演示如何使用 htmx 和 Sortable.js 插件实现拖放重新排序 |
| Updating Other Content | 演示如何更新超出目标元素的内容 |
| Confirm | 演示如何使用 htmx 实现自定义确认对话框 |
| Async Authentication | 演示如何在 htmx 中处理异步认证令牌 |
| Web Components | 演示如何将 htmx 与 Web Components 和 Shadow DOM 集成 |
| (Experimental) moveBefore()-powered hx-preserve | htmx 将使用实验性的 moveBefore() API 来移动元素,如果它存在。 |
有关常见实践,请参阅 Hotwire / Turbo 到 htmx 迁移指南。