示例

#服务端集成示例

一个展示与多种服务端语言和平台集成的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 集成

#从 Hotwire / Turbo 迁移?

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