ヘッダー
リクエストヘッダー（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 | マウスダウン / ホバー時にリンクをプリロード |
| sse | サーバー送信イベント（SSE）のサポート |
| 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... |
確認付き削除
インライン編集