Bu sayfa, Cloud Translation API ile çevrilmiştir.

Popover örnek olayları

Swetha Gopalakrishnan

Saurabh Rajpal

Pop-up'lar web'de her yerdedir. Bu ipuçlarını; 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 yaygın olmasına rağmen tarayıcılarda oluşturmak hâlâ şaşırtıcı derecede zahmetli. Bu sorunu çözmek için tarayıcılara, pop-up oluşturmaya yönelik yeni bir açıklayıcı HTML API grubu geliyor. Bunlardan ilki Popover API.

Popover, Yeni Kullanıma Sunulan Temel'in bir parçasıdır.

Tarayıcı desteği

Kaynak

Pop-up'lar genellikle iletişim kutularıyla karıştırılır. Ancak davranışlarında bazı önemli farklılıklar vardır. dialog.showModal ile açılan dialog öğesi (modal iletişim kutusu), modalın kapatılması için açık bir kullanıcı etkileşimi gerektiren bir deneyimdir. popover, ışığı kapatmayı destekler. Modal dialog ise bu özelliği desteklemez. Kalıcı iletişim kutuları, 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 yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak web sitelerini nasıl geliştirdiğini anlatan bir serinin parçasıdır. Bu makalede, Tokopedia'nın Popover API'yi nasıl uyguladığı ve bu API'den nasıl yararlandığı açıklanmaktadır.

Tokopedia

Popover özellikleri sayesinde React'teki kod satırlarının% 70'ine varan kısmı azaltıldı. Modal, JavaScript'te etkinlik işlemeyi gerektirmek ve modal DOM'u document.body'un sonuna taşımak için React.createPortal kullanmak yerine HTML tarafından doğal olarak kontrol edilebilir. Pop-up'ın açılmasını ve kapanmasını animasyonlu hale getirmek için @starting-style'ü de kullanabiliriz.—Andy Wihalim, Kıdemli Yazılım Mühendisi, Tokopedia.

Tokopedia'nın ürün ayrıntıları sayfalarında (PDP) her ürün için birden fazla ürün resmi bulunur. Ürün küçük resmi tıklandığında, büyütülmüş resmi gösteren bir modal açılır. Bu, e-ticaret web sitelerinde kullanılan yaygın bir kalıptır.

Kod

Tokopedia, kullanıcı arayüzü geliştirmesi için React'i kullanır. Bu modal için popover API'yi uygulamadan önce bir DOM modalı ve düğme kullanıyorlardı. Düğme, modal pencereyi açmak için React durumunu değiştirdi. popover API ile, öğede popover'u popover öğesinin kimliğiyle aynı değerle açan bir popovertarget özelliği belirtirler.

Bu temel uygulamada pop-up çalışır ancak animasyon olmadan görünür ve kaybolur. Pop-up için sorunsuz bir giriş ve çıkış animasyonu oluşturmak üzere :popover-open ve @starting-style öğelerini kullanın ve ayrı mülklere animasyon uygulanmasına izin verin. Aşağıdaki kod örneğinde pop-up, transform: 'scale()' özelliği kullanılarak yakınlaştırılıp uzaklaştırılmaktadır.

Bu kod örneğinde, popover API için giriş ve çıkış animasyonları nasıl uygulanacağı gösterilmektedir.

<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',

  transform: 'scale(0.8)',
  opacity: 0,
  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },

  '&:popover-open': {
    transform: 'scale(1)',
    opacity: 1,
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
  },
});

Tokopedia, popover API'yi desteklemeyen tarayıcılara hitap etmek için oddbird tarafından geliştirilen ve gzip sıkıştırmasıyla yalnızca 3,2 KB olan popover-polyfill'i uyguladı. İyi çalıştığı ve performansta gerilemeye neden olmadığı için polyfill'den memnun kaldılar. Genel olarak, popover API ile React'teki kod satırlarının% 70'ini azaltmayı başardılar.

Tokopedia, React kullanıyor. Ekip, popover bileşenini kullanmayan sayfalarda unmount ederek ve ardından popover içeriği için kod bölme işlemi gerçekleştirerek kod bölme işlemini gerçekleştirdi. Böylece ilk isteklerinin boyutunu düşürdüler.

Pop-up'ları diğer öğelere göre konumlandırmak için CSS ankraj konumlandırmasıyla (Chrome'da yakında kullanıma sunulacak) birlikte kullanmayı düşünebilirsiniz. Bu, örneğin menüler ve ipuçları için kullanışlıdır.

Kaynaklar

Pop-up API ile tanışın
Pop-up ile iletişim kutusu arasındaki fark
Hata bildirmek veya yeni bir özellik isteğinde bulunmak ister misiniz? Düşüncelerinizi öğrenmek isteriz.

Bu serinin, e-ticaret şirketlerinin kaydırmayla çalışan animasyonlar, pop-up, kapsayıcı sorguları ve has() seçici gibi yeni CSS ve kullanıcı arayüzü özelliklerinden nasıl yararlandığından bahseden diğer makalelerini inceleyin.

Popover örnek olayları

Tokopedia

Kod

Popover API'yi kullanırken dikkat edilmesi gereken noktalar

Kaynaklar