Popover örnek olayları

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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 çok yaygın olmasına rağmen, bunları tarayıcılarda oluşturmak şaşırtıcı derecede zahmetli bir iş. 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

  • Chrome: 114.
  • Kenar: 114.
  • Firefox: 125.
  • Safari: 17.

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. dialog kalıcı öğesi bunu yapmaz. 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 ele alan 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ı (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österen bir modal açılır. Bu, e-ticaret web sitelerinde yaygın olarak kullanılan 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'si ile öğede, pop-up'ı pop-over öğesinin kimliğiyle aynı olan bir değerle açan öğede bir popovertarget özelliği belirtirler.

Bu temel uygulamayla, pop-up çalışır ancak herhangi bir 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'ü kullanın ve ayrı mülkleri animasyonlu hale getirin. 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ı. Çoklu dolgunun iyi çalışması ve performansta regresyonlara yol açmaması nedeniyle bu sonuçlardan memnun kaldılar. Genel olarak, popover API ile React'teki kod satırlarının% 70'ini azaltmayı başardılar.

Popover API'sini kullanırken dikkat edilmesi gereken noktalar

Tokopedia, React kullanıyor. Ekip, popover bileşenini kullanmayan sayfalar için 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. Bu sayede ilk isteklerinin boyutunu küçülttü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

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.