示例

服务器端集成示例

¥Server-side Integration Examples

显示集成示例的 GitHub 存储库 列表包含各种服务器端语言和平台,包括 JavaScript、Python、Java 和许多其他语言。

¥A list of GitHub repositories showing examples of integration with a wide variety of server-side languages and platforms, including JavaScript, Python, Java, and many others.

UI 示例

¥UI Examples

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

¥Below are a set of UX patterns implemented in htmx with minimal HTML and styling.

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

¥You can copy and paste them and then adjust them for your needs.

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

从 Hotwire / Turbo 迁移?

¥Migrating from Hotwire / Turbo ?

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

¥For common practices see the Hotwire / Turbo to htmx Migration Guide.