hx-swap
속성은 지정한 대상이 어떻게 응답할지 지정할 수 있게 한다. 초기값은 innerHTML
이다.
innerHTML
- 목표 요소의 안쪽 html을 대체한다.
outerHTML
- 목표 요소의 바깥쪽 html을 대체한다.
beforebegin
- 목표 요소의 시작전에 삽입한다.
afterbegin
- 목표 요소의 시작후 자식 요소 시작전에 삽입한다.
beforeend
- 목표 요소의 마지막 자식 요소 후 삽입한다.
afterend
- 목표 요소가 끝난 후 삽입한다.
delete
- 삭제한다.
none
- 삽입하지 않는다.
<div>
뒤에 /example
요청에 따른 HTML을 넣을 것이다.
수정자
hx-swap
속성은 수정자를 지원하며 swap의 행동을 바꿀수 있다.
Transition: transition
View Transition API를 swap이 일어날때 사용할 수 있다. transition:true
옵션을 사용하면 된다. 또한 세팅을 통해 전역으로 적용되게 할 수 있다. htmx.config.globalViewTansition
→ true
Timing: swap
& settle
이런한 속성들은 HTMX가 CSS transition에 싱크를 맞출때 사용될 수 있다.
Title: ignoreTitle
제목을 무시 할 수 있다.
Scrolling: scroll
& show
scroll
과 show
수정자로 스크롤의 행동을 바꿀 수 있다, 그리고 top
, bottom
, CSS 선택자, window
와 같은 값으로 커스텀이 가능하다
Focus scroll:
htmx는 기본적으로 호출 사이에 포커스된 인풋애 자동-스크롤를 방지한다, 그리고 그것은 긴 호출에선 의도되지 않은 반응일 것이다. 스크롤을 허락하기 위해선 focus-scroll:true
를 사용해라.
반면에 기본적인 반응이 자동-스크롤이길을 원하면 htmx.config.defaultFocusScroll
을 true로 하고 특정 호출만 끈다.
노트
hx-swap
은 상속할 수 있다.
- 초기값은
innerHTML
이다
- DOM에 의한 제한으로,
outerHTML
을 사용해서 <body>
요소를 대체할 수는 없다.
- swap 딜레이는 0ms이다.
- settle 딜레이는 20ms이다.