Popover API tersedia di Dasar Pengukuran

Una Kravets

Bersiaplah! Salah satu fitur yang paling saya sukai baru saja hadir di semua browser modern dan secara resmi menjadi bagian dari Dasar Pengukuran 2024. Fitur ini adalah Popover API. Popover menyediakan begitu banyak primitif dan kemampuan developer yang luar biasa untuk membangun antarmuka berlapis seperti tooltip, menu, UI pengajaran, dan banyak lagi.

Beberapa sorotan singkat tentang kemampuan popover meliputi:

• Promosi ke lapisan atas. Pop-up akan muncul di lapisan atas di atas bagian halaman lainnya, sehingga Anda tidak perlu mengotak-atik z-index.
• Fungsi tutup ringan. Mengeklik di luar area pop-up akan menutup pop-up dan mengembalikan fokus.
• Pengelolaan fokus default. Membuka pop-up akan membuat tab berikutnya berhenti di dalam popover.
• Binding keyboard yang dapat diakses. Menekan tombol esc atau mengalihkan ganda akan menutup popover dan mengembalikan fokus.
• Binding komponen yang dapat diakses. Menghubungkan elemen popover ke pemicu popover secara semantik.

Membuat pop-up

Membuat pop-up cukup mudah. Untuk menggunakan nilai default, yang Anda butuhkan hanyalah button untuk memicu popover, dan elemen untuk dipicu.

• Pertama, tetapkan atribut popover pada elemen yang akan menjadi popover.
• Kemudian, tambahkan id yang unik pada elemen popover.
• Terakhir, untuk menghubungkan tombol ke popover, setel popovertarget tombol ke nilai id elemen popover.

Hal ini ditunjukkan dalam kode berikut:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

Untuk memiliki kontrol yang lebih terperinci atas pop-up, Anda dapat menetapkan jenis pop-up secara eksplisit. Misalnya, menggunakan atribut popover tanpa nilai sama dengan popover="auto". Nilai auto memungkinkan perilaku tutup ringan dan menutup popover lainnya secara otomatis. Gunakan popover="manual" dan Anda perlu menambahkan tombol tutup, pop-up manual tidak menutup pop-up lain, atau memungkinkan pengguna menutup pop-up dengan mengklik keluar di UI. Anda membuat pop-up manual menggunakan hal berikut:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

Dialog pop-up versus modal

Anda mungkin ingin tahu apakah Anda memerlukan pop-up saat dialog muncul, dan jawabannya adalah: Anda mungkin tidak memerlukannya.

Penting untuk diperhatikan bahwa atribut popover tidak menyediakan semantik sendiri. Dan meskipun sekarang Anda bisa membangun pengalaman seperti dialog modal menggunakan popover, ada beberapa perbedaan utama di antara keduanya:

Kesimpulan dan bacaan lebih lanjut

Ada banyak fitur menarik yang dihadirkan popover di platform ini. Untuk mempelajari lebih lanjut API ini, termasuk lebih lanjut tentang aksesibilitas fitur, dan dokumentasi mengenai set fitur, berikut adalah beberapa bacaan yang direkomendasikan untuk informasi lebih lanjut:

• Semantik dan atribut popover: kapan harus digunakan? oleh Hidde de Vries
• Pada aksesibilitas popover: hal yang dilakukan dan tidak dilakukan browser oleh Hidde de Vries
• Dokumentasi MMD tentang popover