Popover ada di mana-mana di web. Anda dapat melihatnya di menu, tips beralih, dan dialog, yang digunakan untuk fitur seperti setelan akun, widget pengungkapan, dan pratinjau kartu produk. Terlepas dari seberapa lazimnya komponen ini, membuatnya di browser tetaplah rumit. Untuk mengatasi hal ini, kumpulan baru API HTML deklaratif untuk membuat popover akan hadir di browser, yang pertama adalah Popover API.
Popover adalah bagian dari Versi Dasar Baru Tersedia.
{i>Popover<i} biasanya disalahartikan sebagai dialog. Namun, ada beberapa perbedaan
penting dalam perilaku mereka. Elemen dialog
yang dibuka dengan dialog.showModal
(dialog modal), adalah pengalaman yang memerlukan interaksi pengguna secara eksplisit untuk
menutup modal. popover
mendukung penutupan ringan. Modal dialog
tidak demikian.
Dialog modal membuat bagian halaman lainnya tidak aktif. popover
tidak demikian.
Baca perbedaannya lebih lanjut.
Artikel ini adalah bagian dari rangkaian yang membahas cara perusahaan e-commerce meningkatkan situs mereka menggunakan fitur CSS dan UI baru. Dalam artikel ini, temukan cara Tokopedia menerapkan dan mendapatkan manfaat dari Popover API.
Tokopedia
Penggunaan atribut popover mengurangi hingga 70% baris kode di React. Modal dapat dikontrol secara native oleh HTML, tanpa memerlukan penanganan peristiwa di JavaScript, dan menggunakan
React.createPortal
untuk memindahkan DOM modal ke akhirdocument.body
. Kami juga dapat menggunakan@starting-style
untuk menganimasikan pembukaan dan penutupan popover.—Andy Wihalim, Senior Software Engineer, Tokopedia.
Halaman Detail Produk (PDP) Tokopedia berisi beberapa gambar produk untuk setiap produk. Saat thumbnail produk diklik, modal akan terbuka untuk menampilkan gambar yang diperbesar. Ini adalah pola umum yang digunakan di situs e-commerce.
Code
Tokopedia menggunakan React untuk pengembangan frontend-nya. Sebelum mengimplementasikan
API popover untuk modal ini, mereka menggunakan modal DOM dan tombol. Tombol tersebut mengubah status React untuk membuka modal. Dengan API popover, mereka menentukan
atribut popovertarget
dalam elemen yang membuka popover dengan nilai
yang sama dengan ID elemen popover.
Dengan implementasi dasar ini, popover akan berfungsi, tetapi muncul dan menghilang
tanpa animasi apa pun. Untuk membuat animasi masuk dan keluar yang lancar untuk
popover, gunakan :popover-open
dan @starting-style
, serta izinkan animasi
properti terpisah.
Dalam contoh kode berikut, popover diskalakan ke dalam dan ke luar menggunakan
properti transform: 'scale()'
.
Contoh kode ini menunjukkan cara menerapkan animasi masuk dan keluar untuk API popover.
<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />
export const cssModalWrapper = css({
background: NN0,
border: 'none',
borderRadius: '.625rem',
width: 1024,
padding: 24,
'&::backdrop': {
opacity: 0,
transitionProperty: 'opacity, display',
transition: '.25s ease-out',
transitionBehavior: 'allow-discrete',
},
transitionProperty: 'transform, opacity, display',
transition: '.25s ease-out',
transitionBehavior: 'allow-discrete',
'@starting-style': {
transform: 'scale(1)',
opacity: 1,
},
transform: 'scale(0.8)',
opacity: 0,
'&:popover-open': {
'@starting-style': {
transform: 'scale(0.8)',
opacity: 0,
},
transform: 'scale(1)',
opacity: 1,
},
});
Untuk memenuhi kebutuhan browser yang tidak mendukung API popover, Tokopedia menerapkan popover-polyfill oleh uniquebird, yang hanya berukuran 3,2 KB dengan kompresi gzip. Mereka puas dengan polyfill karena berfungsi dengan baik dan tidak menyebabkan regresi performa. Secara keseluruhan, mereka dapat mengurangi hingga 70% baris kode di React dengan API popover.
Hal-hal yang perlu dipertimbangkan saat menggunakan Popover API
Tokopedia menggunakan React, dan tim melakukan pemisahan kode dengan melepas komponen popover untuk halaman yang tidak menggunakannya, lalu melakukan pemisahan kode untuk konten pop-up. Dengan cara ini, mereka mengurangi ukuran permintaan awal.
Pertimbangkan untuk menggabungkan pop-up dengan positioning anchor CSS (segera hadir di Chrome) untuk memosisikan pop-up terkait dengan elemen lain. Hal ini berguna, misalnya, untuk menu dan tooltip.
Resource
- Memperkenalkan API popover
- Perbedaan antara popover dan dialog
- Apakah Anda ingin melaporkan bug atau meminta fitur baru? Kami ingin mendengar pendapat Anda.
Pelajari artikel lain dalam rangkaian ini yang membahas bagaimana perusahaan
e-commerce mendapatkan manfaat dari penggunaan fitur CSS dan UI baru seperti animasi
berbasis Scroll, popover, kueri penampung, dan pemilih has()
.