Studia przypadków Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Pudła są wszędzie w sieci. Możesz je zobaczyć w menu, służących do takich funkcji, jak ustawienia konta, widżety komunikatów podgląd kart produktów. Mimo że te komponenty są tak powszechne, w przeglądarkach jest zaskakująco niewygodne. Aby rozwiązać ten problem, musisz utworzyć nowy zestaw deklaratywne interfejsy API HTML do tworzenia wyskakujących okienek będą dostępne w przeglądarkach. to Popover API.

Wyskakujące okienko jest częścią nowego modelu bazowego, który jest ostatnio dostępny.

Obsługa przeglądarek

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

Źródło

Wyskakujące okienko jest często mylone z oknem dialogowym. Istnieją jednak pewne kluczowe różnią się w swoich zachowaniach. Element dialog został otwarty za pomocą tagu dialog.showModal (okno modalne) to doświadczenie, które wymaga wyraźnej interakcji użytkownika zamknij okno. popover obsługuje odrzucanie świateł. Moduł dialog nie działa. Okno modalne sprawia, że reszta strony jest bezwładna. popover nie. Więcej informacji o różnicach

Ten artykuł jest częścią serii, z której dowiesz się, jak firmy z branży e-commerce ulepszyła swoją witrynę za pomocą nowych funkcji CSS i interfejsu użytkownika. W tym artykule dowiesz się, jak firma Tokopedia wdrożyła interfejs Popover API i z niego czerpie korzyści.

Tokopedia

Dzięki atrybutom popover zmniejszyliśmy nawet 70% wierszy kodu w React. Okno modalne mogą być natywnie kontrolowane przez HTML, zamiast wymagać obsługi zdarzeń JavaScript i użycie elementu React.createPortal do przeniesienia modalnego DOM na koniec document.body Możemy też używać narzędzia @starting-style do animowania otwieranie i zamykanie wyskakującego okienka.Andy Wihalim, Senior Software Inżynier, Tokopedia.

Strony szczegółów produktów Tokopedii zawierają wiele zdjęć każdego produktu usługi. Po kliknięciu miniatury produktu otworzy się okno, w którym będzie można powiększony obraz. To często spotykany wzorzec w witrynach e-commerce.

Kod

Tokopedia używa narzędzia React do programowania frontendu. Przed wdrożeniem API popover dla tego modalu, użyli modalu DOM i przycisku. Przycisk zmienił stan reakcji, aby otworzyć okno modalne. Za pomocą interfejsu API popover określają oni Atrybut popovertarget w elemencie, który otwiera okienko wyskakujące z wartością taki sam jak identyfikator elementu wyskakującego.

W przypadku tej podstawowej implementacji wyskakujące okienko działa, ale znika. bez animacji. Aby utworzyć płynną animację wejścia i wyjścia dla użyj wyskakującego okienka, użyj :popover-open i @starting-style i zezwól na animację właściwości dyskretnych. W poniższym przykładzie kodu wyskakujące okienko jest skalowane do i w poziomie za pomocą transform: 'scale()'.

Ten przykładowy kod pokazuje, jak zaimplementować animacje wejścia i wyjścia dla interfejsu API popover.

<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,
  },
});

Aby dostosować ją do przeglądarek, które nie obsługują interfejsu API typu popover, wdrożyła usługę Tokopedia atrybut popover-polyfill od pardbird, co w przypadku kompresji gzip zajmuje tylko 3,2 KB. Jest zadowolony(a) z polyfill , ponieważ sprawdzał się on dobrze i nie spowodował pogorszenia wydajności. Ogólnie były pozwoliliśmy ograniczyć do 70% wierszy kodu w React przy użyciu interfejsu popover API.

Co wziąć pod uwagę podczas korzystania z interfejsu Popover API

Tokopedia korzysta z narzędzia React. Aby podzielić kod, zespół został zdemontowany Dzielenie kodu na strony, które go nie używają, które się pojawiają. W ten sposób zmniejszyli zakres początkowej prośby.

Rozważ połączenie wyskakujących okienek z pozycjonowaniem zakotwiczonych CSS (wkrótce w Chrome) aby ustawić je względem innych elementów. Jest to przydatne np. w przypadku menu i etykietek.

Zasoby

Przeczytaj inne artykuły z tej serii na temat tego, jak e-commerce firm, które skorzystały z nowych funkcji CSS i UI, takich jak przewijanie animacje, wyskakujące okienko, zapytania dotyczące kontenera oraz selektor has().