Popover örnek olayları

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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.

Tarayıcı Desteği

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

Kaynak

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'yiReact.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

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.