Popover ada di mana-mana di web. Anda dapat melihatnya di menu, tips, dan dialog, yang digunakan untuk fitur seperti setelan akun, widget pengungkapan, dan pratinjau kartu produk. Terlepas dari betapa lazimnya komponen ini, membangunnya di browser ternyata masih rumit. Untuk mengatasi hal ini, serangkaian API HTML deklaratif untuk membangun popover akan segera hadir di browser, yang pertama ini adalah Popover API.
Popover adalah bagian dari Baseline Newly Available.
{i>Popover<i} biasanya bingung dengan dialog. Namun, ada beberapa
perbedaan perilaku mereka. Elemen dialog
dibuka dengan dialog.showModal
(dialog modal), merupakan pengalaman yang memerlukan interaksi pengguna
tutup modal. popover
mendukung penutupan ringan. Modal dialog
tidak.
Dialog modal akan membuat bagian lain halaman inert. popover
tidak demikian.
Baca selengkapnya tentang perbedaannya.
Artikel ini merupakan bagian dari rangkaian yang membahas bagaimana perusahaan e-commerce meningkatkan situs web mereka menggunakan fitur CSS dan UI baru. Dalam artikel ini, temukan bagaimana Tokopedia mengimplementasikan dan memanfaatkan Popover API.
Tokopedia
Penggunaan atribut popover mengurangi baris kode hingga 70% di React. Modal dapat dikontrol secara native oleh HTML daripada memerlukan penanganan peristiwa di JavaScript dan menggunakan
React.createPortal
untuk memindahkan DOM modal ke akhirdocument.body
. Kita juga bisa menggunakan@starting-style
untuk menganimasikan pembukaan dan penutupan popover.—Andy Wihalim, Software Senior Engineer, Tokopedia.
Halaman Detail Produk (PDP) Tokopedia berisi beberapa gambar produk untuk masing-masing Google. Saat thumbnail produk diklik, sebuah modal akan terbuka untuk menampilkan gambar yang diperbesar. Pola ini adalah pola umum yang digunakan di situs e-commerce.
Kode
Tokopedia menggunakan React untuk pengembangan frontend mereka. Sebelum menerapkan
popover API untuk modal ini, mereka menggunakan modal DOM dan tombol. Tombol
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 {i>popover<i}.
Dengan implementasi dasar ini, popover berfungsi tetapi muncul dan menghilang
tanpa animasi apa pun. Untuk membuat animasi masuk dan keluar yang mulus untuk
popover, gunakan :popover-open
dan @starting-style
dan izinkan animasi
properti diskret.
Dalam contoh kode berikut, popover diskalakan masuk dan keluar menggunakan
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 mengakomodasi browser yang tidak mendukung API popover, Tokopedia menerapkan popover-polyfill oleh {i>crazybird<i}, yaitu hanya 3,2 KB dengan kompresi gzip. Mereka puas dengan polyfill karena bekerja dengan baik dan tidak menyebabkan regresi kinerja. Secara keseluruhan, mereka mampu 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 {i>popover<i} untuk laman yang tidak menggunakannya, kemudian melakukan pemisahan kode untuk konten pop-up. Dengan cara ini, mereka mengurangi ukuran permintaan awal.
Pertimbangkan untuk menggabungkan popover dengan penempatan anchor CSS (segera hadir di Chrome) untuk memosisikannya relatif terhadap elemen lain. Ini berguna untuk menu dan tooltip misalnya.
Resource
- Memperkenalkan API popover
- Perbedaan antara popover dan dialog
- Ingin melaporkan bug atau meminta fitur baru? Kami ingin mendengar pendapat Anda.
Pelajari artikel lain dalam seri ini yang membahas tentang bagaimana e-commerce
perusahaan mendapatkan keuntungan dari penggunaan fitur CSS dan UI baru seperti berbasis Scroll
animasi, popover, kueri container, dan pemilih has()
.