hx-swap

hx-swap属性允许您指定响应内容将如何相对于AJAX请求的目标进行交换。如果不指定该选项，默认为htmx.config.defaultSwapStyle(innerHTML)。

该属性的可能值为：

这些选项基于标准DOM命名和Element.insertAdjacentHTML规范。

因此，在这段代码中：

  <div hx-get="/example" hx-swap="afterend">获取HTML并追加</div>

div将向/example发出请求，并将返回的内容追加到div之后

修饰符

hx-swap属性支持修改交换行为的修饰符。下面将介绍这些修饰符。

过渡效果：transition

如果您想在交换发生时使用新的视图过渡API，您可以为交换使用transition:true选项。您也可以通过将htmx.config.globalViewTransitions配置设置为true来全局启用此功能。

时间控制：swap和settle

您可以通过包含swap修饰符来修改htmx在收到响应后等待交换内容的时间：

  <!-- 这将在收到响应后等待1秒再执行交换 -->
  <div hx-get="/example" hx-swap="innerHTML swap:1s">获取HTML并追加</div>

类似地，您可以通过包含settle修饰符来修改交换和稳定逻辑之间的时间：

  <!-- 这将在收到响应后等待1秒再执行稳定 -->
  <div hx-get="/example" hx-swap="innerHTML settle:1s">获取HTML并追加</div>

这些属性可用于使htmx与CSS过渡效果的时间同步。

标题：ignoreTitle

默认情况下，如果htmx在响应内容中找到<title>标签，它将更新页面标题。您可以通过将ignoreTitle选项设置为true来关闭此行为。

滚动：scroll和show

您还可以通过使用scroll和show修饰符来更改目标元素的滚动行为，这两个修饰符都可以取值top和bottom：

  <!-- 这个固定高度的div在内容追加后将滚动到div的底部 -->
  <div style="height:200px; overflow: scroll" 
       hx-get="/example" 
       hx-swap="beforeend scroll:bottom">
     获取HTML并追加并滚动到底部
  </div>

  <!-- 这将获取一些内容并将其添加到#another-div，然后确保#another-div的顶部在视口中可见 -->
  <div hx-get="/example" 
       hx-swap="innerHTML show:top"
       hx-target="#another-div">
    获取一些内容
  </div>

如果您希望针对不同的元素进行滚动或显示，可以在scroll:或show:后放置一个CSS选择器，后跟:top或:bottom：

  <!-- 这将获取一些内容并将其交换到当前div中，然后确保#another-div的顶部在视口中可见 -->
  <div hx-get="/example" 
       hx-swap="innerHTML show:#another-div:top">
    获取一些内容
  </div>

您也可以使用window:top和window:bottom来滚动到当前窗口的顶部和底部。

  <!-- 这将获取一些内容并将其交换到当前div中，然后确保视口滚动到最顶部 -->
  <div hx-get="/example" 
       hx-swap="innerHTML show:window:top">
    获取一些内容
  </div>

对于增强的链接和表单，默认行为是show:top。您可以通过htmx.config.scrollIntoViewOnBoost全局禁用它，或者可以在元素基础上使用hx-swap="show:none"。

<form action="/example" hx-swap="show:none">
  ...
</form>

焦点滚动

htmx在具有定义id属性的输入之间保留焦点。默认情况下，htmx防止在请求之间自动滚动到聚焦的输入，这在较长的请求中可能是不需要的行为，当用户已经滚动离开时。要启用焦点滚动，您可以使用focus-scroll:true。

  <input id="name" hx-get="/validation" 
       hx-swap="outerHTML focus-scroll:true"/>

或者，如果您希望页面在每次请求后自动滚动到聚焦的元素，您可以将htmx全局配置值htmx.config.defaultFocusScroll更改为true。然后使用focus-scroll:false为特定请求禁用它。

  <input id="name" hx-get="/validation" 
       hx-swap="outerHTML focus-scroll:false"/>

注意事项