hx-swap

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

此属性的可能值有：

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

因此，在此代码中：

  <div hx-get="/example" hx-swap="afterend">Get Some HTML & Append It</div>

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

修饰符

hx-swap 属性支持用于更改交换行为的修饰符。它们在下面概述。

过渡：transition

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

时序：swap & settle

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

  <!-- 这将在接收后等待 1s 再进行交换 -->
  <div hx-get="/example" hx-swap="innerHTML swap:1s">Get Some HTML & Append It</div>

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

  <!-- 这将在接收后等待 1s 再进行结算 -->
  <div hx-get="/example" hx-swap="innerHTML settle:1s">Get Some HTML & Append It</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">
     Get Some HTML & Append It & Scroll To Bottom
  </div>

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

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

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

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

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

注意事项