Memperkenalkan API popover

Una Kravets

Popover ada di mana-mana di web. Anda dapat melihatnya di menu, tips beralih, dan dialog, yang dapat ditunjukkan sebagai setelan akun, widget pengungkapan, dan pratinjau kartu produk. Terlepas dari seberapa lazimnya komponen ini, membuatnya di browser ternyata masih rumit. Anda perlu menambahkan 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 saja bahkan sebelum Anda mulai membangun fungsi inti yang berguna dan unik dari popover Anda.

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

Atribut popover

Dukungan Browser

  • 114
  • 114
  • 17

Sumber

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

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

Sekarang 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 mengalihkannya menjadi terbuka dan tertutup. Namun, Anda juga dapat membuat popover eksplisit menggunakan popovertargetaction. Tindakan ini akan mengganti tindakan toggle default. Opsi popovertargetaction mencakup:

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

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

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

Pop-up otomatis versus manual

Menggunakan atribut popover itu sendiri sebenarnya adalah pintasan untuk popover="auto". Saat dibuka, popover default akan menutup paksa popover otomatis lainnya, kecuali popover ancestor. Hal ini dapat ditutup melalui tombol tutup ringan atau tombol tutup.

Di sisi lain, menyetel popover=manual akan membuat jenis popover lain: popover manual. Hal ini tidak menutup paksa jenis elemen lain dan tidak menutup melalui lampu tutup. Anda harus menutupnya melalui timer atau tindakan tutup 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 Anda menjelajahi demo di atas, Anda dapat melihat bahwa mengklik di luar area popover tidak akan menutup popover secara terang. Selain itu, jika ada pop-up lain yang terbuka, jendela tersebut tidak akan ditutup.

Untuk meninjau perbedaannya:

Popover dengan popover=auto:

  • Saat dibuka, tutup paksa popover lainnya.
  • Dapat ditutup tanpa izin.

Popover dengan popover=manual:

  • Jangan tutup paksa jenis elemen lainnya.
  • Jangan ditutup sekilas. Tutup menggunakan tombol atau tindakan tutup.

Menata gaya popover

Sejauh ini Anda telah belajar tentang pop-up dasar di HTML. Namun, ada juga beberapa fitur gaya visual bagus yang disertakan dalam 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

Penting untuk diperhatikan bahwa atribut popover tidak menyediakan semantik sendiri. Dan meskipun Anda kini dapat membuat pengalaman seperti dialog modal menggunakan popover="auto", ada beberapa perbedaan utama di antara keduanya:

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

Demo di atas adalah dialog semantik dengan perilaku popover. Artinya, bagian lain dari halaman tersebut tidak berfungsi dan popover dialog memiliki perilaku penutupan ringan. 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, aplikasi ini direncanakan untuk versi Chromium yang akan datang, setelah rilis ini.

Dengan kemampuan untuk menganimasikan properti terpisah, serta 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. Ambil contoh sebelumnya. Menganimasikan masuk dan keluar akan terlihat jauh lebih halus dan mendukung pengalaman pengguna yang lebih lancar:

Pemosisian anchor

Popover sangat berguna ketika Anda ingin mengatur posisi 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 API popover beserta posisi anchor CSS untuk memastikan bahwa popover #menu-items selalu ditambatkan ke pemicu pengalihannya, 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 popover tengah yang ditambatkan ke dasar tombol beralih anchor mungkin diberi gaya sebagai berikut:

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

Sekarang Anda memiliki menu popover yang berfungsi penuh yang ditambatkan ke tombol beralih dan memiliki semua fitur popover bawaan, 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. Aku senang melihatmu menggunakan popover!

Bacaan Tambahan