¥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 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 将使用它来移动元素。 |
¥Migrating from Hotwire / Turbo ?
有关常见做法,请参阅 Hotwire / Turbo 到 htmx 迁移指南。
¥For common practices see the Hotwire / Turbo to htmx Migration Guide.