Memperkenalkan API popover

Una Kravets

Pop-up ada di mana-mana di web. Anda dapat melihatnya di menu, toggletip, dan dialog, yang dapat muncul sebagai setelan akun, widget pengungkapan, dan pratinjau kartu produk. Meskipun komponen ini sudah umum, mem-build-nya di browser masih terasa rumit. Anda perlu menambahkan skrip untuk mengelola fokus, status buka dan tutup, hook yang dapat diakses ke komponen, binding keyboard untuk masuk dan keluar dari pengalaman, dan itu semua bahkan sebelum Anda mulai mem-build fungsi inti popover yang berguna dan unik.

Untuk mengatasi hal ini, serangkaian API HTML deklaratif baru untuk membuat pop-up akan hadir di browser, dimulai dengan popover API di Chromium 114.

Atribut popover

Daripada mengelola semua kerumitan sendiri, Anda dapat membiarkan browser menanganinya dengan atribut popover dan kumpulan fitur berikutnya. Popover HTML mendukung:

• Promosi ke lapisan atas. Pop-up akan muncul di lapisan terpisah di atas bagian halaman lainnya, sehingga Anda tidak perlu repot-repot dengan indeks z.
• 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.
• Binding keyboard yang mudah diakses. Menekan tombol esc akan menutup popover dan mengembalikan fokus.
• Binding komponen yang dapat diakses. Menghubungkan elemen popover ke pemicu popover secara semantik.

Kini Anda dapat membuat pop-up dengan semua fitur ini tanpa menggunakan JavaScript. Popover dasar memerlukan tiga hal:

• Atribut popover pada elemen yang berisi popover.
• id pada elemen yang berisi popover.
• popovertarget dengan nilai id popover pada elemen yang membuka popover.

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

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Sekarang Anda memiliki popover dasar yang berfungsi penuh.

Popover ini dapat digunakan untuk menyampaikan informasi tambahan atau sebagai widget pengungkapan.

Default dan penggantian

Secara default, seperti dalam cuplikan kode sebelumnya, menyiapkan popover dengan popovertarget berarti tombol atau elemen yang membuka popover akan mengalihkan popover tersebut untuk terbuka dan tertutup. Namun, Anda juga dapat membuat popover eksplisit menggunakan popovertargetaction. Tindakan ini akan mengganti tindakan tombol default. Opsi popovertargetaction mencakup:

popovertargetaction="show": Menampilkan popover. popovertargetaction="hide": Menyembunyikan popover.

Dengan popovertargetaction="hide", Anda dapat membuat tombol “tutup” dalam popover, seperti dalam cuplikan berikut:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

Popover otomatis versus manual

Menggunakan atribut popover saja sebenarnya adalah pintasan untuk popover="auto". Saat dibuka, popover default akan memaksa menutup popover otomatis lainnya, kecuali untuk popover ancestor. Panel dapat ditutup melalui tombol tutup atau tutup ringan.

Di sisi lain, menetapkan popover=manual akan membuat jenis popover lain: popover manual. Tindakan ini tidak memaksa menutup jenis elemen lain dan tidak menutup melalui penutupan ringan. Anda harus menutupnya melalui timer atau tindakan tutup eksplisit. Jenis popover yang sesuai untuk popover=manual adalah elemen yang muncul dan menghilang, tetapi tidak boleh memengaruhi bagian lain halaman, seperti notifikasi toast.

Jika menjelajahi demo di atas, Anda dapat melihat bahwa mengklik di luar area popover tidak akan menutup popover. Selain itu, jika ada popover lain yang terbuka, popover tersebut tidak akan ditutup.

Untuk meninjau perbedaannya:

Popover dengan popover=auto:

• Saat dibuka, tutup paksa popover lainnya.
• Dapat ditutup dengan ringan.

Popover dengan popover=manual:

• Jangan paksa tutup jenis elemen lainnya.
• Jangan tutup dengan cahaya. Menutupnya menggunakan tindakan tombol atau tutup.

Menata gaya popover

Sejauh ini, Anda telah mempelajari popover dasar di HTML. Namun, ada juga beberapa fitur gaya yang bagus yang disertakan dengan popover. Salah satunya adalah kemampuan untuk menata gaya ::backdrop.

Di popover auto, ini adalah lapisan yang berada tepat di bawah lapisan atas (tempat popover berada), yang berada di atas bagian halaman lainnya. Pada contoh berikut, ::backdrop diberi warna semi-transparan:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

Perbedaan antara popover dan dialog

Perlu diperhatikan bahwa atribut popover tidak memberikan semantik dengan sendirinya. Meskipun Anda kini dapat membuat pengalaman seperti dialog modal menggunakan popover="auto", ada beberapa perbedaan utama antara keduanya:

Elemen dialog yang dibuka dengan dialog.showModal (dialog modal), adalah pengalaman yang memerlukan interaksi pengguna yang eksplisit untuk menutup modal. popover mendukung penutupan ringan. dialog modal tidak. Dialog modal membuat bagian lain halaman menjadi tidak aktif. popover tidak.

Demo di atas adalah dialog semantik dengan perilaku popover. Artinya, bagian halaman lainnya tidak inert dan popover dialog mendapatkan perilaku penutupan ringan. Anda dapat mem-build dialog ini dengan perilaku popover menggunakan kode berikut:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

Segera hadir

Masuk dan keluar interaktif

Kemampuan untuk menganimasikan properti terpisah, termasuk menganimasikan ke dan dari display: none serta menganimasikan ke dan dari lapisan atas belum tersedia di browser. Namun, fitur ini direncanakan untuk versi Chromium mendatang, yang akan segera dirilis setelah rilis ini.

Dengan kemampuan untuk menganimasikan properti terpisah, dan menggunakan :popover-open dan @starting-style, Anda dapat menyiapkan gaya sebelum perubahan dan setelah perubahan untuk memungkinkan transisi yang lancar saat membuka dan menutup popover. Lihat contoh sebelumnya. Menganimasikannya masuk dan keluar terlihat jauh lebih halus dan mendukung pengalaman pengguna yang lebih lancar:

Penempatan anchor

Pop-up sangat cocok jika Anda ingin memosisikan pemberitahuan, modal, atau notifikasi berdasarkan area pandang. Namun, popover juga berguna untuk menu, tooltip, dan elemen lain yang perlu diposisikan relatif terhadap elemen lain. Di sinilah peran anchor CSS.

Demo menu radial berikut menggunakan popover API bersama dengan pemosisi anchor CSS untuk memastikan bahwa popover #menu-items selalu diatarkan ke pemicu tombolnya, yaitu tombol #menu-toggle.

Menyiapkan anchor mirip dengan menyiapkan popover:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

Anda menyiapkan anchor dengan memberinya id (dalam contoh ini, #menu-toggle), lalu menggunakan anchor="menu-toggle" untuk menghubungkan kedua elemen tersebut. Sekarang, Anda dapat menggunakan anchor() untuk menata gaya popover. Menu popover yang dipusatkan dan disematkan ke dasar tombol anchor dapat diberi gaya sebagai berikut:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

Sekarang Anda memiliki menu pop-up yang berfungsi penuh dan ditautkan ke tombol tombol dan memiliki semua fitur bawaan pop-up, tanpa memerlukan JavaScript.

Kesimpulan

Popovor API adalah langkah pertama dalam serangkaian kemampuan baru untuk membuat pembuatan aplikasi web lebih mudah dikelola dan lebih mudah diakses secara default. Kami ingin melihat cara Anda menggunakan popover.

Bacaan Tambahan

• Dialog dan popover tampak serupa. Apa perbedaannya?
• Semantik dan atribut popover
• Dokumentasi MDN tentang popover
• Penjelasan popover OpenUI