헤더
요청 헤더 (htmx가 전송)
| HX-Request | htmx 요청이면 항상 "true" |
| HX-Target | 타겟 요소의 ID |
| HX-Trigger | 트리거된 요소의 ID |
| HX-Trigger-Name | 트리거된 요소의 name |
| HX-Current-URL | 브라우저 현재 URL |
| HX-Prompt | hx-prompt에 대한 사용자 응답 |
응답 헤더 (서버가 전송)
| HX-Redirect | URL로 클라이언트 사이드 리다이렉트 |
| HX-Refresh | "true"이면 전체 페이지 새로고침 |
| HX-Retarget | CSS 선택자로 hx-target 재정의 |
| HX-Reswap | hx-swap 전략 재정의 |
| HX-Trigger | 클라이언트 사이드 이벤트 트리거 |
| HX-Push-Url | 브라우저 히스토리에 URL 추가 |
이벤트
생명 주기 이벤트
| htmx:configRequest | 요청 전; 파라미터/헤더 수정 |
| htmx:beforeRequest | AJAX 호출 직전 |
| htmx:afterRequest | 요청 완료 후 |
| htmx:beforeSwap | 콘텐츠 교체 전 |
| htmx:afterSwap | 콘텐츠 교체 후 |
| htmx:afterSettle | 스왑 후 DOM이 안정화된 후 |
| htmx:responseError | 서버가 에러 상태 반환 |
이벤트 수신
document.body.addEventListener("htmx:afterSwap", (e) => {
console.log("Swapped:", e.detail.target);
});
// Cancel a request
document.body.addEventListener("htmx:configRequest", (e) => {
if (!confirm("Proceed?")) e.preventDefault();
});
확장
확장 사용
주요 확장
| json-enc | 요청 본문을 JSON으로 인코딩 |
| loading-states | 로딩 상태 CSS 클래스 관리 |
| head-support | 응답의 태그 병합 |
| preload | mousedown/hover 시 링크 미리 로드 |
| sse | Server-Sent Events 지원 |
| ws | WebSocket 지원 |
| response-targets | 에러 응답에 다른 타겟 지정 |
인디케이터
로딩 인디케이터
Loading...
인디케이터 CSS
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }
htmx는 요청 중 요소에 htmx-request 클래스를 추가
요청 중 비활성화
hx-disabled-elt는 요청 중 disabled 속성 추가
일반 패턴
실시간 검색
무한 스크롤
| Loading more... |
확인 후 삭제
인라인 편집