Daftar Isi
- Atribut Inti htmx
- Atribut Tambahan htmx
- Kelas CSS htmx
- Header Permintaan htmx
- Header Respon htmx
- Peristiwa htmx
- Ekstensi htmx
- Referensi API JavaScript
- Opsi Konfigurasi
Atribut Inti htmx
Berikut adalah atribut yang paling umum digunakan saat menggunakan htmx:
| Atribut | Deskripsi |
|---|---|
| hx-get | Mengirimkan permintaan GET ke URL yang ditentukan |
| hx-post | Mengirimkan permintaan POST ke URL yang ditentukan |
| hx-on* | Menangani peristiwa dengan skrip inline pada elemen |
| hx-push-url | Memasukkan URL ke bilah lokasi peramban untuk membuat riwayat |
| hx-select | Memilih konten yang akan ditukar dari respon |
| hx-select-oob | Memilih konten yang akan ditukar dari respon, di tempat lain selain target (di luar jalur) |
| hx-swap | Mengontrol cara konten akan ditukar (outerHTML, beforeend, afterend, …) |
| hx-swap-oob | Menandai elemen yang akan ditukar dari respon (di luar jalur) |
| hx-target | Menentukan elemen target yang akan ditukar |
| hx-trigger | Menentukan peristiwa yang memicu permintaan |
| hx-vals | Menambahkan nilai untuk dikirimkan bersama permintaan (format JSON) |
Atribut Tambahan htmx
Berikut adalah atribut tambahan yang tersedia dalam htmx:
| Atribut | Deskripsi |
|---|---|
| hx-boost | Menambahkan peningkatan progresif untuk tautan dan formulir |
| hx-confirm | Menampilkan dialog konfirmasi sebelum mengirimkan permintaan |
| hx-delete | Mengirimkan permintaan DELETE ke URL yang ditentukan |
| hx-disable | Menonaktifkan pemrosesan htmx untuk node yang diberikan dan node anaknya |
| hx-disabled-elt | Menambahkan atribut disabled ke elemen yang ditentukan saat permintaan sedang berlangsung |
| hx-disinherit | Mengontrol dan menonaktifkan pewarisan atribut otomatis untuk node anak |
| hx-encoding | Mengubah jenis pengkodean permintaan |
| hx-ext | Ekstensi yang akan digunakan untuk elemen ini |
| hx-headers | Menambahkan ke header yang akan dikirimkan bersama permintaan |
| hx-history | Mencegah data sensitif disimpan dalam cache riwayat |
| hx-history-elt | Elemen yang akan diambil snapshot dan dipulihkan selama navigasi riwayat |
| hx-include | Menyertakan data tambahan dalam permintaan |
| hx-indicator | Elemen yang akan diberi kelas htmx-request selama permintaan berlangsung |
| hx-params | Memfilter parameter yang akan dikirimkan dengan permintaan |
| hx-patch | Mengirimkan permintaan PATCH ke URL yang ditentukan |
| hx-preserve | Menentukan elemen yang akan tetap tidak berubah di antara permintaan |
| hx-prompt | Menampilkan prompt sebelum mengirimkan permintaan |
| hx-put | Mengirimkan permintaan PUT ke URL yang ditentukan |
| hx-replace-url | Mengganti URL di bilah lokasi peramban |
| hx-request | Mengonfigurasi berbagai aspek permintaan |
| hx-sync | Mengontrol cara permintaan yang dibuat oleh elemen berbeda disinkronkan |
| hx-validate | Memaksa elemen untuk memvalidasi diri mereka sendiri sebelum permintaan |
| hx-vars | Menambahkan nilai secara dinamis ke parameter untuk dikirimkan dengan permintaan (tidak disarankan, gunakan hx-vals) |
Kelas CSS htmx
| Kelas | Deskripsi |
|---|---|
| htmx-added | Diterapkan pada konten baru sebelum ditukar, dihapus setelah selesai. |
| htmx-indicator | Kelas yang dihasilkan secara dinamis yang akan beralih visibel (opacity:1) saat kelas htmx-request ada |
| htmx-request | Diterapkan pada elemen atau elemen yang ditentukan dengan hx-indicator saat permintaan sedang berlangsung |
| htmx-settling | Diterapkan pada target setelah konten ditukar, dihapus setelah selesai. Durasinya dapat dimodifikasi melalui hx-swap. |
| htmx-swapping | Diterapkan pada target sebelum konten ditukar, dihapus setelah ditukar. Durasinya dapat dimodifikasi melalui hx-swap. |
Header Permintaan htmx
| Header | Deskripsi |
|---|---|
| HX-Boosted | Menunjukkan bahwa permintaan berasal dari elemen yang menggunakan hx-boost |
| HX-Current-URL | URL saat ini dari peramban |
| HX-History-Restore-Request | ”true” jika permintaan adalah untuk pemulihan riwayat setelah tidak ditemukan di cache riwayat lokal |
| HX-Prompt | Respons pengguna terhadap hx-prompt |
| HX-Request | Selalu “true” |
| HX-Target | ID elemen target jika ada |
| HX-Trigger-Name | Nama elemen pemicu jika ada |
| HX-Trigger | ID elemen pemicu jika ada |
Header Respon htmx
| Header | Deskripsi |
|---|---|
| HX-Location | Memungkinkan Anda melakukan pengalihan sisi klien yang tidak melakukan pemuatan ulang halaman penuh |
| HX-Push-Url | Memasukkan URL baru ke dalam tumpukan riwayat |
| HX-Redirect | Dapat digunakan untuk melakukan pengalihan sisi klien ke lokasi baru |
| HX-Refresh | Jika diatur ke “true”, sisi klien akan melakukan penyegaran penuh halaman |
| HX-Replace-Url | Mengganti URL saat ini di bilah lokasi |
| HX-Reswap | Memungkinkan Anda menentukan cara respons akan ditukar. Lihat hx-swap untuk nilai yang mungkin |
| HX-Retarget | Pemilih CSS yang memperbarui target pembaruan konten ke elemen lain di halaman |
| HX-Reselect | Pemilih CSS yang memungkinkan Anda memilih bagian mana dari respons yang digunakan untuk ditukar. Menggantikan hx-select yang ada pada elemen pemicu |
| HX-Trigger | Memungkinkan Anda memicu peristiwa sisi klien |
| HX-Trigger-After-Settle | Memungkinkan Anda memicu peristiwa sisi klien setelah langkah penyelesaian |
| HX-Trigger-After-Swap | Memungkinkan Anda memicu peristiwa sisi klien setelah langkah penukaran |
Peristiwa htmx
| Peristiwa | Deskripsi |
|---|---|
| htmx:abort | Kirim peristiwa ini ke elemen untuk membatalkan permintaan |
| htmx:afterOnLoad | Dipicu setelah permintaan AJAX selesai memproses respons yang berhasil |
| htmx:afterProcessNode | Dipicu setelah htmx menginisialisasi node |
| htmx:afterRequest | Dipicu setelah permintaan AJAX selesai |
| htmx:afterSettle | Dipicu setelah DOM selesai diselesaikan |
| htmx:afterSwap | Dipicu setelah konten baru ditukar |
| htmx:beforeCleanupElement | Dipicu sebelum htmx menonaktifkan elemen atau menghapusnya dari DOM |
| htmx:beforeOnLoad | Dipicu sebelum pemrosesan respons apa pun terjadi |
| htmx:beforeProcessNode | Dipicu sebelum htmx menginisialisasi node |
| htmx:beforeRequest | Dipicu sebelum permintaan AJAX dilakukan |
| htmx:beforeSwap | Dipicu sebelum pertukaran dilakukan, memungkinkan Anda mengonfigurasi pertukaran |
| htmx:beforeSend | Dipicu tepat sebelum permintaan AJAX dikirim |
| htmx:configRequest | Dipicu sebelum permintaan, memungkinkan Anda menyesuaikan parameter, header |
| htmx:confirm | Dipicu setelah pemicu terjadi pada elemen, memungkinkan Anda membatalkan (atau menunda) mengirimkan permintaan AJAX |
| htmx:historyCacheError | Dipicu saat terjadi kesalahan selama penulisan cache |
| htmx:historyCacheMiss | Dipicu saat terjadi cache miss di subsistem riwayat |
| htmx:historyCacheMissError | Dipicu saat pengambilan jarak jauh tidak berhasil |
| htmx:historyCacheMissLoad | Dipicu saat pengambilan jarak jauh berhasil |
| htmx:historyRestore | Dipicu saat htmx menangani tindakan pemulihan riwayat |
| htmx:beforeHistorySave | Dipicu sebelum konten disimpan ke cache riwayat |
| htmx:load | Dipicu saat konten baru ditambahkan ke DOM |
| htmx:noSSESourceError | Dipicu saat elemen merujuk ke peristiwa SSE dalam pemicunya, tetapi tidak ada sumber SSE induk yang ditentukan |
| htmx:onLoadError | Dipicu saat terjadi pengecualian selama penanganan onLoad di htmx |
| htmx:oobAfterSwap | Dipicu setelah elemen di luar jalur ditukar |
| htmx:oobBeforeSwap | Dipicu sebelum pertukaran elemen di luar jalur dilakukan, memungkinkan Anda mengonfigurasi pertukaran |
| htmx:oobErrorNoTarget | Dipicu saat elemen di luar jalur tidak memiliki ID yang cocok di DOM saat ini |
| htmx:prompt | Dipicu setelah prompt ditampilkan |
| htmx:pushedIntoHistory | Dipicu setelah URL didorong ke dalam riwayat |
| htmx:responseError | Dipicu saat terjadi kesalahan respons HTTP (kode respons non-200 atau 300) |
| htmx:sendError | Dipicu saat kesalahan jaringan mencegah permintaan HTTP terjadi |
| htmx:sseError | Dipicu saat terjadi kesalahan dengan sumber SSE |
| htmx:sseOpen | Dipicu saat sumber SSE dibuka |
| htmx:swapError | Dipicu saat terjadi kesalahan selama fase pertukaran |
| htmx:targetError | Dipicu saat target yang tidak valid ditentukan |
| htmx:timeout | Dipicu saat terjadi waktu tunggu permintaan |
| htmx:validation:validate | Dipicu sebelum elemen divalidasi |
| htmx:validation:failed | Dipicu saat elemen gagal validasi |
| htmx:validation:halted | Dipicu saat permintaan dihentikan karena kesalahan validasi |
| htmx:xhr:abort | Dipicu saat permintaan AJAX dibatalkan |
| htmx:xhr:loadend | Dipicu saat permintaan AJAX berakhir |
| htmx:xhr:loadstart | Dipicu saat permintaan AJAX dimulai |
| htmx:xhr:progress | Dipicu secara berkala selama permintaan AJAX yang mendukung peristiwa progress |
Referensi API JavaScript
| Metode | Deskripsi |
|---|---|
| htmx.addClass() | Menambahkan kelas ke elemen yang diberikan |
| htmx.ajax() | Mengirimkan permintaan AJAX gaya htmx |
| htmx.closest() | Menemukan induk terdekat ke elemen yang diberikan yang cocok dengan pemilih |
| htmx.config | Properti yang menyimpan objek konfigurasi htmx saat ini |
| htmx.createEventSource | Properti yang menyimpan fungsi untuk membuat objek EventSource SSE untuk htmx |
| htmx.createWebSocket | Properti yang menyimpan fungsi untuk membuat objek WebSocket untuk htmx |
| htmx.defineExtension() | Mendefinisikan ekstensi htmx |
| htmx.find() | Menemukan satu elemen yang cocok dengan pemilih |
| htmx.findAll() | Menemukan semua elemen yang cocok dengan pemilih yang diberikan |
| htmx.logAll() | Memasang logger yang akan mencatat semua peristiwa htmx |
| htmx.logger | Properti yang diatur ke logger saat ini (default adalah null) |
| htmx.off() | Menghapus pendengar peristiwa dari elemen yang diberikan |
| htmx.on() | Membuat pendengar peristiwa pada elemen yang diberikan, mengembalikannya |
| htmx.onLoad() | Menambahkan handler callback untuk peristiwa htmx:load |
| htmx.parseInterval() | Menguraikan deklarasi interval menjadi nilai milidetik |
| htmx.process() | Memproses elemen yang diberikan dan anaknya, menghubungkan perilaku htmx apa pun |
| htmx.remove() | Menghapus elemen yang diberikan |
| htmx.removeClass() | Menghapus kelas dari elemen yang diberikan |
| htmx.removeExtension() | Menghapus ekstensi htmx |
| htmx.takeClass() | Mengambil kelas dari elemen lain untuk elemen yang diberikan |
| htmx.toggleClass() | Mengalihkan kelas dari elemen yang diberikan |
| htmx.trigger() | Memicu peristiwa pada elemen |
| htmx.values() | Mengembalikan nilai input yang terkait dengan elemen yang diberikan |
Opsi Konfigurasi
Htmx memiliki beberapa opsi konfigurasi yang dapat diakses secara terprogram atau deklaratif. Berikut adalah daftarnya:
| Variabel Konfigurasi | Info |
|---|---|
| htmx.config.historyEnabled | default ke true, hanya berguna untuk pengujian |
| htmx.config.historyCacheSize | default ke 10 |
| htmx.config.refreshOnHistoryMiss | default ke false, jika diatur ke true, htmx akan mengeluarkan refresh halaman penuh pada history miss daripada menggunakan permintaan AJAX |
| htmx.config.defaultSwapStyle | default ke innerHTML |
| htmx.config.defaultSwapDelay | default ke 0 |
| htmx.config.defaultSettleDelay | default ke 20 |
| htmx.config.includeIndicatorStyles | default ke true (menentukan apakah gaya indikator dimuat) |
| htmx.config.indicatorClass | default ke htmx-indicator |
| htmx.config.requestClass | default ke htmx-request |
| htmx.config.addedClass | default ke htmx-added |
| htmx.config.settlingClass | default ke htmx-settling |
| htmx.config.swappingClass | default ke htmx-swapping |
| htmx.config.allowEval | default ke true, dapat digunakan untuk menonaktifkan penggunaan eval oleh htmx untuk fitur tertentu (misalnya filter pemicu) |
| htmx.config.allowScriptTags | default ke true, menentukan apakah htmx akan memproses tag script yang ditemukan dalam konten baru |
| htmx.config.inlineScriptNonce | default ke ”, artinya tidak ada nonce yang akan ditambahkan ke skrip inline |
| htmx.config.attributesToSettle | default ke [“class”, “style”, “width”, “height”], atribut yang akan diselesaikan selama fase penyelesaian |
| htmx.config.useTemplateFragments | default ke false, tag template HTML untuk mengurai konten dari server (tidak kompatibel dengan IE11!) |
| htmx.config.wsReconnectDelay | default ke full-jitter |
| htmx.config.wsBinaryType | default ke blob, jenis data biner yang diterima melalui koneksi WebSocket |
| htmx.config.disableSelector | default ke [hx-disable], [data-hx-disable], htmx tidak akan memproses elemen dengan atribut ini atau induknya |
| htmx.config.withCredentials | default ke false, izinkan permintaan Access-Control lintas situs menggunakan kredensial seperti cookie, header otorisasi, atau sertifikat klien TLS |
| htmx.config.timeout | default ke 0, jumlah milidetik yang dapat diambil permintaan sebelum dihentikan secara otomatis |
| htmx.config.scrollBehavior | default ke ‘smooth’, perilaku untuk tautan yang ditingkatkan pada transisi halaman. Nilai yang diizinkan adalah auto dan smooth. Smooth akan menggulung halus ke atas halaman sementara auto akan berperilaku seperti tautan biasa. |
| htmx.config.defaultFocusScroll | jika elemen yang difokuskan harus digulir ke tampilan, defaultnya adalah false dan dapat diganti menggunakan pengubah tukar focus-scroll |
| htmx.config.getCacheBusterParam | default ke false, jika diatur ke true htmx akan menyertakan parameter pemecah cache dalam permintaan GET untuk menghindari penyimpanan respons parsial oleh browser |
| htmx.config.globalViewTransitions | jika diatur ke true, htmx akan menggunakan API View Transition saat menukar konten baru. |
| htmx.config.methodsThatUseUrlParams | default ke [“get”], htmx akan memformat permintaan dengan metode ini dengan mengkodekan parameternya di URL, bukan di badan permintaan |
| htmx.config.selfRequestsOnly | default ke false, jika diatur ke true, hanya akan mengizinkan permintaan AJAX ke domain yang sama dengan dokumen saat ini |
| htmx.config.ignoreTitle | default ke false, jika diatur ke true htmx tidak akan memperbarui judul dokumen saat tag judul ditemukan dalam konten baru |
| htmx.config.scrollIntoViewOnBoost | default ke true, apakah target elemen yang ditingkatkan digulir ke viewport. Jika hx-target dihilangkan pada elemen yang ditingkatkan, targetnya defaultnya adalah body, menyebabkan halaman bergulir ke atas. |
| htmx.config.triggerSpecsCache | default ke null, cache untuk menyimpan spesifikasi pemicu yang dievaluasi, meningkatkan kinerja parsing dengan mengorbankan penggunaan memori yang lebih besar. Anda dapat mendefinisikan objek sederhana untuk menggunakan cache yang tidak pernah bersih, atau mengimplementasikan sistem Anda sendiri menggunakan objek proxy |
Anda dapat mengaturnya secara langsung dalam JavaScript, atau Anda dapat menggunakan tag meta: