示例

服务器端集成示例

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

UI 示例

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

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

PatternDescription
Click To Edit演示数据对象的内联编辑
Bulk Update演示批量更新多行数据
Click To Load演示点击加载表格中的更多行
Delete Row演示表格中的行删除
Edit Row演示如何编辑表格中的行
Lazy Loading演示如何懒加载内容
Inline Validation演示如何进行内联字段验证
Infinite Scroll演示页面的无限滚动
Active Search演示活动搜索框模式
Progress Bar演示类似作业运行器的进度条
Value Select演示使一个 select 的值依赖于另一个 select
Animations演示各种动画技术
File Upload演示如何通过 ajax 上传文件并带有进度条
Preserving File Inputs after Form Errors演示如何在表单错误后保留文件输入
Reset User Input演示如何在提交后重置表单输入
Dialogs - Browser演示 prompt 和 confirm 对话框
Dialogs - UIKit演示使用 UIKit 的模态对话框
Dialogs - Bootstrap演示使用 Bootstrap 的模态对话框
Dialogs - Custom演示从零开始的模态对话框
Tabs (Using HATEOAS)演示如何使用 HATEOAS 原则显示和选择选项卡
Tabs (Using JavaScript)演示如何使用 JavaScript 显示和选择选项卡
Keyboard Shortcuts演示如何为 htmx 启用的元素创建键盘快捷键
Drag & Drop / Sortable演示如何使用 htmx 和 Sortable.js 插件实现拖放重新排序
Updating Other Content演示如何更新超出目标元素的内容
Confirm演示如何使用 htmx 实现自定义确认对话框
Async Authentication演示如何在 htmx 中处理异步认证令牌
Web Components演示如何将 htmx 与 Web Components 和 Shadow DOM 集成
(Experimental) moveBefore()-powered hx-preservehtmx 将使用实验性的 moveBefore() API 来移动元素,如果它存在。

从 Hotwire / Turbo 迁移?

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