示例

服务器端集成示例

一个展示与多种服务器端语言和平台(包括JavaScript、Python、Java等)集成的GitHub仓库示例列表

UI示例

以下是一组使用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迁移?

常见实践请参阅Hotwire / Turbo到htmx迁移指南