Web'de pop-up'lar her yerde. Bunları hesap ayarları, açıklama widget'ları ve ürün kartı önizlemeleri gibi özellikler için kullanılan menülerde, açma/kapatma ipuçlarında ve iletişim kutularında görebilirsiniz. Bu bileşenlerin ne kadar yaygın olduklarına rağmen bunları tarayıcılarda oluşturmak yine de şaşırtıcı derecede zahmetli oluyor. Bu sorunu çözmek için tarayıcılara, pop-up'lar oluşturmaya yönelik yeni bildirim temelli HTML API'leri sunulacak. Bunların ilki Popover API'dir.
Popover, Referans Yeni Kullanılabilirlik'in bir parçasıdır.
Pop-up'lar genellikle iletişim kutularıyla karıştırılır. Ancak davranışlarında bazı
önemli farklar vardır. dialog.showModal
ile açılan dialog
öğesi (kalıcı iletişim kutusu), kalıcı pencereyi kapatmak için kullanıcı etkileşimi gerektiren bir deneyimdir. popover
, ışıkla kapatmayı destekler. dialog
kalıcı iletişim kutusu bunu yapmaz.
Kalıcı iletişim kutusu sayfanın geri kalanını etkisiz hale getirir. popover
bunu yapmaz.
Farklar hakkında daha fazla bilgi edinin.
Bu makale, e-ticaret şirketlerinin yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak web sitelerini nasıl geliştirdiğini ele alan bir serinin parçasıdır. Bu makalede, Tokopedia'nın Popover API'yi nasıl uyguladığını ve bundan nasıl yararlandığını keşfedin.
Tokopedia
Popover özelliklerini kullanmak, React'te% 70'e varan kod satırlarını kısalttı. Kalıcı öğe, JavaScript'te etkinlik işlenmesini ve kalıcı DOM'u
document.body
sonuna taşımak içinReact.createPortal
kullanılmasını gerektirmez. Bunun yerine, HTML tarafından yerel olarak kontrol edilebilir. Ayrıca, pop-up'ın açılış ve kapanışına animasyon eklemek için@starting-style
kullanabiliriz. - Andy Wihalim, Kıdemli Yazılım Mühendisi, Tokopedia.
Tokopedia'nın Ürün Ayrıntısı Sayfaları (PDP), her ürün için birden fazla ürün resmi içerir. Ürün küçük resmi tıklandığında, büyütülmüş resmi göstermek için bir kalıcı iletişim kutusu açılır. Bu, e-ticaret web sitelerinde yaygın olarak kullanılan bir kalıptır.
Kod
Tokopedia, ön uç geliştirme için React'ı kullanıyor. Bu modal için popover API'yi uygulamadan önce bir DOM kalıcı iletişim kutusu ve bir düğme kullandılar. Düğme, tepki durumunu değiştirerek kalıcı pencereyi açacak şekilde değiştirildi. Popover API'siyle öğede, pop-up'ı öğenin kimliğiyle aynı olan bir değerle açan bir popovertarget
özelliği belirtirler.
Bu temel uygulamayla, pop-over çalışır ancak herhangi bir animasyon olmadan görünür ve kaybolur. Popover için yumuşak bir giriş ve çıkış animasyonu oluşturmak için :popover-open
ve @starting-style
kullanın ve ayrı özelliklerin animasyonuna izin verin.
Aşağıdaki kod örneğinde, pop-over transform: 'scale()'
özelliği kullanılarak ölçeklendirilir ve ölçeklendirilir.
Bu kod örneği, popover API'si için giriş ve çıkış animasyonlarının nasıl uygulanacağını gösterir.
<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'i uyguladı.Bu uygulama, gzip sıkıştırmasıyla yalnızca 3,2 KB boyutundadır. Çoklu dolgunun çalışması ve performans gerilemelerine neden olmadığı için kullanıcılar bu uygulamadan memnun kaldı. Genel olarak popover API'sini kullanarak React'teki kod satırlarını% 70'e kadar azaltabildiler.
Popover API'yi kullanırken dikkat edilmesi gereken noktalar
Tokopedia, React'ı kullanıyor ve ekip, kodu bölme işlemini, kullanılmayan sayfalar için popover bileşenini kaldırıp, ardından pop-over içeriği için bir kod bölme işlemi yaparak gerçekleştirdi. Bu sayede ekip ilk taleplerinin boyutunu küçültmüş oldu.
Diğer öğelere göre konumlandırmak için pop-up'ları CSS sabit konumlandırmasıyla (çok yakında Chrome'da) birleştirmeyi düşünün. Bu, örneğin menüler ve araç ipuçları için yararlıdır.
Kaynaklar
- Karşınızda popover API
- Pop-over ve iletişim kutusu arasındaki fark
- Hata bildirmek mi yoksa yeni bir özellik isteğinde bulunmak mı istiyorsunuz? Görüşlerinizi almak istiyoruz.
E-ticaret şirketlerinin kaydırma destekli animasyonlar, pop-up, kapsayıcı sorguları ve has()
seçici gibi yeni CSS ve kullanıcı arayüzü özelliklerinden nasıl yararlandığını anlatan bu serideki diğer makaleleri inceleyin.