Popover ada di mana-mana di web. Anda dapat melihatnya di menu, tips beralih, 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 pembuatan skrip untuk mengelola fokus, status terbuka dan tertutup, hook yang dapat diakses ke dalam komponen, binding keyboard untuk masuk dan keluar dari pengalaman, dan itu semua bahkan sebelum Anda mulai membangun fungsi inti yang berguna, unik, dan inti dari popover Anda.
Untuk mengatasi hal ini, kumpulan baru API HTML deklaratif untuk membangun popover akan segera hadir di browser, dimulai dengan popover
API di Chromium 114.
Atribut popover
Daripada mengelola semua kerumitan sendiri, Anda dapat mengizinkan browser menanganinya dengan atribut popover
dan rangkaian fitur berikutnya. Dukungan popover HTML:
- Promosi ke lapisan atas. Popover akan muncul di lapisan terpisah di atas bagian halaman lainnya, jadi Anda tidak perlu mencari-cari indeks z.
- Fungsi tutup ringan. Mengeklik di luar area pop-up akan menutup pop-up dan mengembalikan fokus.
- Pengelolaan fokus default. Membuka popover akan membuat tab berikutnya berhenti di dalam popover.
- Binding keyboard yang dapat diakses. Menekan tombol
esc
akan menutup popover dan mengembalikan fokus. - Binding komponen yang dapat diakses. Menghubungkan elemen popover ke pemicu popover secara semantik.
Sekarang Anda dapat membangun popover dengan semua fitur ini tanpa menggunakan JavaScript. Pop-up dasar memerlukan tiga hal:
- Atribut
popover
pada elemen yang berisi popover. id
pada elemen yang berisi popover.popovertarget
dengan nilaiid
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.
Pop-up ini dapat digunakan untuk menyampaikan informasi tambahan atau sebagai widget pengungkapan.
Default dan penggantian
Secara default, seperti dalam cuplikan kode sebelumnya, menyiapkan pop-up dengan popovertarget
berarti tombol atau elemen yang membuka pop-up akan mengalihkannya menjadi buka dan tutup. 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 pop-up.
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
sendiri sebenarnya adalah pintasan untuk popover="auto"
. Saat dibuka, popover
default akan menutup paksa popover otomatis lainnya, kecuali untuk popover ancestor. Iklan ini dapat ditutup melalui tombol tutup terang atau tombol tutup.
Di sisi lain, menyetel popover=manual
akan membuat jenis pop-up lain: pop-up manual. Tindakan ini tidak memaksa menutup jenis elemen lain dan tidak menutup melalui penutupan ringan. Anda harus menutupnya melalui timer atau tindakan penutup yang eksplisit. Jenis popover yang sesuai untuk popover=manual
adalah elemen yang muncul dan menghilang, tetapi tidak akan memengaruhi bagian halaman lainnya, 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 menutup dengan terang.
Popover dengan popover=manual
:
- Jangan paksa tutup jenis elemen lainnya.
- Jangan tutup ringan. Menutupnya menggunakan tindakan tombol atau tutup.
Menata gaya popover
Sejauh ini Anda telah belajar tentang popover dasar dalam 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. Dalam 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. Modal dialog
tidak.
Dialog modal membuat sisa halaman inert. popover
tidak.
Demo di atas adalah dialog semantik dengan perilaku popover. Artinya, bagian lain halaman tersebut tidak inert dan popover dialog mendapatkan perilaku penutupan terang. Anda dapat membuat 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 tersebut direncanakan untuk versi Chromium berikutnya, 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:
Pemosisian 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 anchor CSS berperan.
Demo menu radial berikut menggunakan popover API bersama dengan pemosisi anchor CSS untuk memastikan bahwa popover #menu-items
selalu ditautkan 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. Sekarang, Anda dapat menggunakan anchor()
untuk menata gaya popover. Menu pop-up tengah yang ditambatkan ke garis dasar tombol anchor mungkin 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
API popover adalah langkah pertama dalam serangkaian kemampuan baru untuk membuat aplikasi web lebih mudah dikelola dan lebih mudah diakses secara default. Kami ingin melihat cara Anda menggunakan popover.