一个展示与多种服务器端语言和平台(包括JavaScript、Python、Java等)集成的GitHub仓库示例列表。
以下是一组使用htmx实现的最小化HTML和样式的UX模式。
您可以复制粘贴它们,然后根据需要进行调整。
模式 | 描述 |
---|---|
点击编辑 | 演示数据对象的行内编辑 |
批量更新 | 演示多行数据的批量更新 |
点击加载 | 演示点击加载表格中的更多行 |
删除行 | 演示表格中的行删除 |
编辑行 | 演示如何编辑表格中的行 |
懒加载 | 演示如何懒加载内容 |
行内验证 | 演示如何进行行内字段验证 |
无限滚动 | 演示页面的无限滚动 |
主动搜索 | 演示主动搜索框模式 |
进度条 | 演示类似任务运行器的进度条 |
级联选择 | 演示如何使一个选择框的值依赖于另一个选择框 |
动画 | 演示各种动画技术 |
文件上传 | 演示如何通过ajax上传文件并显示进度条 |
表单错误后保留文件输入 | 演示如何在表单错误后保留文件输入 |
重置用户输入 | 演示如何在提交后重置表单输入 |
对话框 - 浏览器 | 演示提示和确认对话框 |
对话框 - UIKit | 演示使用UIKit的模态对话框 |
对话框 - Bootstrap | 演示使用Bootstrap的模态对话框 |
对话框 - 自定义 | 演示从头开始创建模态对话框 |
标签页(使用HATEOAS) | 演示如何使用HATEOAS原则显示和选择标签页 |
标签页(使用JavaScript) | 演示如何使用JavaScript显示和选择标签页 |
键盘快捷键 | 演示如何为htmx启用的元素创建键盘快捷键 |
拖放 / 可排序 | 演示如何将htmx与Sortable.js插件结合使用,实现拖放重新排序 |
更新其他内容 | 演示如何更新目标元素之外的内容 |
确认 | 演示如何使用htmx实现自定义确认对话框 |
异步认证 | 演示如何在htmx中处理异步认证令牌 |
Web组件 | 演示如何将htmx与Web组件和Shadow DOM集成 |
(实验性) moveBefore()驱动的hx-preserve | 如果存在实验性的moveBefore() API,htmx将使用它来移动元素。 |
常见实践请参阅Hotwire / Turbo到htmx迁移指南。