示例

服务器端集成示例

GitHub 存储库列表展示了与各种服务器端语言和平台集成的示例，包括 JavaScript、Python、Java 等。

用户界面示例

以下是一组用 htmx 实现的 UX 模式，具有最少的 HTML 和样式。

您可以复制并粘贴它们，然后根据您的需要进行调整。

图案	描述
点击编辑	演示数据对象的内联编辑
批量更新	演示批量更新多行数据
点击加载	演示如何单击以加载表格中的更多行
删除行	演示表格中的行删除
编辑行	演示如何编辑表中的行
延迟加载	演示如何延迟加载内容
内联验证	演示如何进行内联字段验证
无限滚动	演示页面的无限滚动
主动搜索	演示活动搜索框模式
进度条	演示类似作业运行器的进度条
价值选择	演示如何使一个选择的值依赖于另一个选择
动画	演示各种动画技术
文件上传	演示如何通过 ajax 上传带有进度条的文件
表单错误后保留文件输入	演示如何在表单错误后保留文件输入
对话框 - 浏览器	演示提示和确认对话框
对话框 - UIKit	使用 UIKit 演示模式对话框
对话框 - Bootstrap	使用 Bootstrap 演示模式对话框
对话框 - 自定义	从头开始演示模式对话框
标签（使用 HATEOAS）	演示如何使用 HATEOAS 原则显示和选择选项卡
标签（使用 JavaScript）	演示如何使用 JavaScript 显示和选择选项卡
键盘快捷键	演示如何为启用 htmx 的元素创建键盘快捷键
拖放/可排序	演示如何使用 htmx 和 Sortable.js 插件实现拖放重新排序
更新其他内容	演示如何更新目标元素以外的内容
确认	演示如何使用 htmx 实现自定义确认对话框
异步身份验证	演示如何在 htmx 中处理异步身份验证令牌
Web 组件	演示如何将 htmx 与 Web 组件和 shadow DOM 集成
（实验性）moveBefore() 驱动的 hx-preserve	moveBefore()如果存在的话，htmx 将使用实验性的API 来移动元素。