示例

#服务器端集成示例

一组展示与各种服务器端语言和平台集成的示例的 GitHub 代码库,包括 JavaScript、Python、Java 等。

#UI 示例

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

您可以复制粘贴它们,然后根据您的需求调整它们。

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

#从 Hotwire / Turbo 迁移?

有关常见做法,请参阅 Hotwire / Turbo 到 htmx 的迁移指南