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 Baseline 2024. Dan 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 bermain-main dengan z-index.
• Fungsi tutup ringan. Mengklik di luar area popover akan menutup popover dan mengembalikan fokus.
• Pengelolaan fokus default. Membuka popover akan membuat tab berikutnya berhenti di dalam popover tersebut.
• Binding keyboard yang aksesibel. Menekan tombol esc atau beralih dua kali akan menutup popover dan mengembalikan fokus.
• Binding komponen yang aksesibel. Menghubungkan elemen popover ke pemicu popover secara semantik.

Membuat popover

Membuat popover 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 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 popover, Anda dapat menetapkan jenis popover secara eksplisit. Misalnya, menggunakan atribut popover tanpa nilai sama dengan popover="auto". Nilai auto memungkinkan perilaku penutupan ringan dan otomatis menutup popover lainnya. 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 di UI. Anda membuat popover 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 popover versus modal

Anda mungkin bertanya-tanya apakah Anda perlu popover ketika dialog ada, dan jawabannya adalah: Anda mungkin tidak.

Penting untuk diperhatikan bahwa atribut popover tidak menyediakan semantik sendiri. Dan meskipun Anda sekarang dapat 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 ke platform ini. Untuk mempelajari API ini lebih lanjut, termasuk lebih lanjut tentang aksesibilitas fitur, dan dokumentasi terkait set fitur, berikut adalah beberapa bacaan yang direkomendasikan untuk informasi lebih lanjut:

• Semantik dan atribut popover: apa yang harus digunakan kapan? oleh Hidde de Vries
• Di aksesibilitas popover: apa yang dilakukan dan tidak dilakukan browser oleh Hidde de Vries
• Dokumentasi MDN tentang popover