UUUP Tools UUUP Tools 常用在线工具集

dev / 可用工具

次世代 HTMX 交互属性备忘速查图谱

专为抛弃重构前端繁杂依赖栈的勇者们准备！从 Trigger 到 Swap 全部囊括的高亮语法大全。

快速切换 → HTML 实体与控制符百科
HTMXFrontendCheatsheet
快速切换： HTML 实体与控制符百科 Tailwind 50-950 全色谱

收藏工具

当前还没有选择收藏模式。

快捷操作

返回开发工具 浏览全部工具

你可以复制当前工具页链接，或者在支持的设备上直接调用系统分享。

DevOps / Frontend

HTMX Cheat Sheet

专为抛弃重构前端繁杂依赖栈的勇者们准备！从 Trigger 到 Swap 全部囊括的高亮语法大全。

Core Actions

  • hx-get="/api" Issues a GET request to the URL
  • hx-post="/api" Issues a POST request
  • hx-put="/api" Issues a PUT request
  • hx-patch="/api" Issues a PATCH request
  • hx-delete="/api" Issues a DELETE request

Triggers (hx-trigger)

  • hx-trigger="click" Trigger on click (default for buttons)
  • hx-trigger="submit" Trigger on submit (default for forms)
  • hx-trigger="keyup changed delay:500ms" Debounced search input
  • hx-trigger="mouseenter once" Lazy load on hover
  • hx-trigger="every 2s" Polling: execute every 2 seconds

Target & Swap

  • hx-target="#result" Load res into ele matching CSS selector
  • hx-target="this" Update the element doing the request
  • hx-target="closest tr" Target a specific ancestor
  • hx-swap="innerHTML" Replace inside target (Default)
  • hx-swap="outerHTML" Replace entire target element
  • hx-swap="beforeend" Append at the end of inside (Chat ui)

Loading Indicators

  • hx-indicator="#spinner" Add `htmx-request` class to element
  • <div class="htmx-indicator"> Hidden by default, shown during req

使用场景

  • 你不想用外挂式的超大框架如 React，只想写点 HTMX 的周末。

如何使用

  1. 1. 纯阅读面板，可快速摘抄对应的动作绑定标签。

示例输入输出

FAQ

工具列表

相关推荐

你可以从这里继续打开相近场景的工具，减少重复搜索。

HTML 实体与控制符百科

转码对抗字符安全防线字典

可用

空格用怎么拼？版权号 `©` 怎么写代码里？涵盖数学符号、货币与控制版面的常见 HTML 安全脱逃 Entity （`&...;` 与其 `&#...;` 版）超大平铺总览图册。

Design HTML Dictionary
查看工具

Tailwind 50-950 全色谱

无需文档的大局级颜色搜索板

可用

一张表看完！极其丝滑宏大的 Tailwind CSS 全线色彩面板（由 Slate 一直到 Rose，含 950 黑阶）。不再每次都需要跑回官网查 "emerald-400 的对撞色是多少"。

Design Tailwind CSS
查看工具