Pop-over'lar web'in her yerinde karşınızda. Bunları menülerde, açma/kapatma ipuçlarında ve hesap ayarları, açıklama widget'ları ve ürün kartı önizlemeleri. Bu bileşenler ne kadar yaygın olsa da, onları oluşturmak için kullanımı şaşırtıcı derecede hâlâ külfetli. Bu sorunu çözmek için, tarayıcı pop-up'ları oluşturmaya yönelik bildirim temelli HTML API'leri tarayıcılara geliyor. Bunlar Popover API'dir.
Pop-up, Yeni Kullanılabilir Temel Değer'in bir parçasıdır.
Pop-up'lar genellikle iletişim kutusuyla karıştırılır. Ancak bilmeniz gereken önemli
tespit edebilirsiniz. dialog.showModal
ile bir dialog
öğesi açıldı
(kalıcı iletişim), kullanıcının açıkça etkileşimde bulunmasını gerektiren
iletişim kutusunu kapatın. popover
, ışıklı kapanmayı destekler. dialog
kalıcı öğesi bunu yapmaz.
Kalıcı iletişim kutusu, sayfanın geri kalanını etkisiz hale getirir. popover
bunu yapmaz.
Farklılıklar hakkında daha fazla bilgi edinin.
Bu makale, e-ticaret şirketlerinin nasıl performans gösterdiğini ele alan bir dizinin parçasıdır. web sitelerini yeni CSS ve kullanıcı arayüzü özellikleri kullanarak geliştirdi. Bu makalede, Tokopedia'nın Popover API'yi nasıl uyguladığı ve bundan nasıl yararlandığı.
Tokopedia
React'te popover özellikleri kullanılarak kod satırlarının% 70'ine kadar azaltıldı. Kalıcı ve komut dosyalarında etkinlik işleme gerektirmek yerine HTML tarafından yerel olarak kontrol kalıcı DOM'yi
React.createPortal
document.body
. Ayrıca@starting-style
öğesini kullanarak pop-up'ın açılıp kapanıyor.—Andy Wihalim, Kıdemli Yazılım Mühendis, Tokopedia.
Tokopedia'nın Ürün Ayrıntısı Sayfaları (PDP) ise her ürün için birden fazla ürün resmi içeriyor belirler. Ürün küçük resmine tıklandığında bir kalıcı iletişim kutusu açılır ve büyütülmüş resim. Bu, e-ticaret web sitelerinde yaygın olarak kullanılan bir kalıptır.
Kod
Tokopedia, ön uç geliştirme için React'i kullanıyor.
bir DOM kalıcı API'sini ve bir düğme kullandılar. Düğme
React durumunu, kalıcı öğeyi açmak için değiştirdi. Popover API'sı sayesinde,
Pop-up'ı bir değerle açan öğedeki popovertarget
özelliği
popover öğesinin kimliğiyle aynıdır.
Bu temel uygulamayla, pop-up çalışır ancak görünür ve kaybolur
hiçbir animasyon olmadan. için yumuşak bir giriş ve çıkış animasyonu oluşturmak
pop-up, :popover-open
ve @starting-style
öğelerini kullanın ve animasyona izin verin
özellikler.
Aşağıdaki kod örneğinde pop-up,
transform: 'scale()'
mülkünü seçin.
Bu kod örneği, popover API'sı için giriş ve çıkış animasyonlarının nasıl uygulanacağını öğrenin.
<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,
},
});
Tokopedia, popover API'sini desteklemeyen tarayıcılara hitap etmek için oddbird tarafından geliştirilen popover-polyfill ile Bu boyut, gzip sıkıştırmasıyla yalnızca 3,2 KB'tır. Çoklu dolgudan memnun kaldılar işe yaradı ve performansta gerilemeler oluşmadı. Genel olarak, pop-over API ile React'te% 70'e kadar kod satırlarını azaltma
Popover API'sini kullanırken dikkat edilmesi gereken noktalar
Tokopedia React'i kullanıyor ve ekip, popover bileşenini kullanmayan sayfalar için pop-up bileşenini kullanarak, daha sonra pop-up içeriği. Bu sayede ilk isteklerinin boyutunu küçülttüler.
Pop-up'ları CSS sabit konumlandırmasıyla birleştirmeyi düşünün (yakında Chrome için de kullanıma sunulacaktır) bunları diğer öğelere göre konumlandırmak için kullanılır. Bu yöntem, örneğin menüler ve ipuçları için faydalıdır.
Kaynaklar
- Popover API'yle tanışın
- Pop-up ve iletişim kutusu arasındaki fark
- Hata bildirmek mi yoksa yeni bir özellik talep etmek mi istiyorsunuz? Görüşlerinizi almak istiyoruz.
Bu seride, e-ticaretin nasıl gerçekleştiğinden bahseden diğer makaleleri inceleyin.
kaydırma odaklı gibi yeni CSS ve kullanıcı arayüzü özelliklerinden faydalanan şirketlere
animasyonlar, pop-up, kapsayıcı sorguları ve has()
seçicisi.