Popover örnek olayları

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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.

Tarayıcı Desteği

  • 114
  • 114
  • 125
  • 17

Kaynak

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çin React.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

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.