Popover örnek olayları

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

Pop-up'lar web'de her yerde bulunur. Bu metinleri; hesap ayarları, açıklama widget'ları ve ürün kartı önizlemeleri gibi özellikler için kullanılan menülerde, açılır ipuçlarında ve iletişim kutularında görebilirsiniz. Bu bileşenler ne kadar yaygın olursa olsun, tarayıcılarda oluşturulmaları hâlâ şaşırtıcı derecede zahmetlidir. Bu sorunu çözmek için tarayıcılara popover oluşturmaya yönelik yeni bir dizi bildirimli HTML API'si eklenecek. Bunlardan ilki Popover API olacak.

Pop-over genellikle iletişim kutusuyla karıştırılır. Ancak davranışları arasında bazı önemli farklar vardır. dialog.showModal ile açılan bir dialog öğesi (kalıcı iletişim kutusu), kalıcı iletişim kutusunu kapatmak için açık kullanıcı etkileşimi gerektiren bir deneyimdir. popover, hafifçe kapatma özelliğini destekler. Bir modal dialog 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 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 kullanıldığında React'teki kod satırları% 70'e kadar azaldı. Modal, JavaScript'te etkinlik işleme gerektirmek ve modal DOM'u React.createPortal sonuna taşımak için document.body kullanmak yerine HTML ile yerel olarak kontrol edilebilir. Ayrıca, popover'ın açılıp kapanmasını canlandırmak için @starting-style kullanabiliyoruz.—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östermek için bir modal açılır. Bu, e-ticaret web sitelerinde yaygın olarak kullanılan bir yöntemdir.

Kod

Tokopedia, ön uç geliştirme için React'i kullanır. Bu modal için popover API'yi uygulamadan önce DOM modal ve düğme kullanıyorlardı. Düğme, kalıcı öğeyi açmak için React durumunu değiştirdi. Popover API ile, popover'ı açan öğede, popover öğesinin kimliğiyle aynı değere sahip bir popovertarget özelliği belirtirler.

Bu temel uygulamada, popover çalışır ancak herhangi bir animasyon olmadan görünür ve kaybolur. Popover için sorunsuz bir giriş ve çıkış animasyonu oluşturmak üzere :popover-open ve @starting-style özelliklerini kullanın ve ayrı özelliklerin animasyonuna izin verin. Aşağıdaki kod örneğinde, popover transform: 'scale()' özelliği kullanılarak ölçeklendirilir.

Bu kod örneğinde, popover API'si için giriş ve çıkış animasyonlarının 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ılar için oddbird tarafından geliştirilen popover-polyfill'i uyguladı.Bu polyfill, gzip sıkıştırmasıyla yalnızca 3,2 KB boyutundadır. Polyfill'in iyi çalıştığını ve performans gerilemesine neden olmadığını belirterek memnuniyetlerini dile getirdiler. Genel olarak, popover API ile React'teki kod satırlarını% 70'e kadar azaltabildiler.

Popover API'yi kullanırken dikkat edilmesi gereken noktalar

Tokopedia, React kullanıyor. Ekip, popover bileşenini kullanmayan sayfalar için bileşeni kaldırdıktan sonra popover içeriği için kod bölme işlemi yaparak kod bölmeyi başardı. Bu sayede, ilk isteklerinin boyutunu küçülttüler.

Diğer öğelere göre konumlandırmak için popover'ları CSS bağlantı öğesi konumlandırmayla birleştirebilirsiniz (Chrome'da yakında kullanıma sunulacak). Bu özellik, örneğin menüler ve ipuçları için faydalıdır.

Kaynaklar

Bu serideki diğer makaleleri inceleyerek e-ticaret şirketlerinin kaydırmaya dayalı animasyonlar, popover, kapsayıcı sorguları ve has() seçici gibi yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak nasıl fayda sağladığını öğrenin.