🪴 지식정원

Search

SearchSearch

hx-swap

Dec 26, 2023, 4 min read

hx-swap속성은 지정한 대상이 어떻게 응답할지 지정할 수 있게 한다. 초기값은 innerHTML이다.

  • innerHTML - 목표 요소의 안쪽 html을 대체한다.
  • outerHTML - 목표 요소의 바깥쪽 html을 대체한다.
  • beforebegin - 목표 요소의 시작전에 삽입한다.
  • afterbegin - 목표 요소의 시작후 자식 요소 시작전에 삽입한다.
  • beforeend - 목표 요소의 마지막 자식 요소 후 삽입한다.
  • afterend - 목표 요소가 끝난 후 삽입한다.
  • delete - 삭제한다.
  • none - 삽입하지 않는다.
  <div hx-get="/example" 
  hx-swap="afterend">
  Get Some HTML & Append It
  </div>

<div>뒤에 /example요청에 따른 HTML을 넣을 것이다.

수정자

hx-swap속성은 수정자를 지원하며 swap의 행동을 바꿀수 있다.

Transition: transition

View Transition API를 swap이 일어날때 사용할 수 있다. transition:true옵션을 사용하면 된다. 또한 세팅을 통해 전역으로 적용되게 할 수 있다. htmx.config.globalViewTansition → true

Timing: swap & settle

<!-- this will wait 1s before doing the swap after it is received -->
<div hx-get="/example" hx-swap="innerHTML swap:1s">
  Get Some HTML & Append It
</div>
<!-- this will wait 1s before doing the swap after it is received -->
<div hx-get="/example" hx-swap="innerHTML settle:1s">
  Get Some HTML & Append It
</div>

이런한 속성들은 HTMX가 CSS transition에 싱크를 맞출때 사용될 수 있다.

Title: ignoreTitle

제목을 무시 할 수 있다.

Scrolling: scroll & show

scroll 과 show 수정자로 스크롤의 행동을 바꿀 수 있다, 그리고 top, bottom, CSS 선택자, window 와 같은 값으로 커스텀이 가능하다

  <!-- this fixed-height div will scroll to the bottom of the div after content is appended -->
  <div style="height:200px; overflow: scroll" 
       hx-get="/example" 
       hx-swap="beforeend scroll:bottom">
     Get Some HTML & Append It & Scroll To Bottom
  </div>
  <!-- this will get some content and add it to #another-div, then ensure that the top of #another-div is visible in the 
       viewport -->
  <div hx-get="/example" 
       hx-swap="innerHTML show:top"
       hx-target="#another-div">
    Get Some Content
  </div>
  <!-- this will get some content and swap it into the current div, then ensure that the top of #another-div is visible in the 
       viewport -->
  <div hx-get="/example" 
       hx-swap="innerHTML show:#another-div:top">
    Get Some Content
  </div>
  <!-- this will get some content and swap it into the current div, then ensure that the viewport is scrolled to the
       very top -->
  <div hx-get="/example" 
       hx-swap="innerHTML show:window:top">
    Get Some Content
  </div>

Focus scroll:

htmx는 기본적으로 호출 사이에 포커스된 인풋애 자동-스크롤를 방지한다, 그리고 그것은 긴 호출에선 의도되지 않은 반응일 것이다. 스크롤을 허락하기 위해선 focus-scroll:true를 사용해라.

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

반면에 기본적인 반응이 자동-스크롤이길을 원하면 htmx.config.defaultFocusScroll을 true로 하고 특정 호출만 끈다.

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

노트

  • hx-swap은 상속할 수 있다.
  • 초기값은 innerHTML이다
  • DOM에 의한 제한으로, outerHTML을 사용해서 <body>요소를 대체할 수는 없다.
  • swap 딜레이는 0ms이다.
  • settle 딜레이는 20ms이다.

Graph View

Backlinks