Deze pagina is vertaald door de Cloud Translation API.

Popover-casestudies

Swetha Gopalakrishnan

Saurabh Rajpal

Popovers zijn overal op het web te vinden. Je ziet ze in menu's, toggletips en dialoogvensters, en ze worden gebruikt voor functies zoals accountinstellingen, disclosure-widgets en productkaartvoorbeelden. Ondanks hoe wijdverspreid deze componenten zijn, is het bouwen ervan in browsers nog steeds verrassend omslachtig. Om dit op te lossen, komt er een nieuwe set declaratieve HTML-API's voor het bouwen van popovers naar browsers. De eerste hiervan is de Popover API .

Popover is onderdeel van Baseline Nieuw Beschikbaar .

Browser Support

Source

Een popover wordt vaak verward met een dialoogvenster. Er zijn echter enkele belangrijke verschillen in hun gedrag. Een dialog dat geopend wordt met dialog.showModal (een modaal dialoogvenster), vereist expliciete gebruikersinteractie om het dialoogvenster te sluiten. Een popover ondersteunt light-dismiss. Een modaal dialog niet. Een modaal dialoogvenster maakt de rest van de pagina inert. Een popover niet. Lees meer over de verschillen .

Dit artikel maakt deel uit van een serie waarin wordt besproken hoe e-commercebedrijven hun websites hebben verbeterd met nieuwe CSS- en UI-functies. Ontdek in dit artikel hoe Tokopedia de Popover API heeft geïmplementeerd en ervan heeft geprofiteerd.

Tokopedia

Het gebruik van popover-attributen verminderde het aantal regels code in React tot wel 70%. De modal kan standaard worden aangestuurd door HTML in plaats van event handling in JavaScript. Ook kan React.createPortal worden gebruikt om de DOM van de modal naar het einde van document.body te verplaatsen. We kunnen ook @starting-style gebruiken om het openen en sluiten van de popover te animeren . — Andy Wihalim , Senior Software Engineer, Tokopedia .

De Product Detail Pages (PDP's) van Tokopedia bevatten meerdere productafbeeldingen voor elk product. Wanneer u op de productminiatuur klikt, wordt een venster geopend met de vergrote afbeelding. Dit is een veelvoorkomend patroon op e-commercewebsites.

Code

Tokopedia gebruikt React voor hun frontend-ontwikkeling. Voordat ze de popover API voor dit venster implementeerden, gebruikten ze een DOM-venster en een knop. De knop wijzigde de React-status om het venster te openen. Met de popover API specificeren ze een popovertarget attribuut in het element dat de popover opent met een waarde die gelijk is aan de ID van het popover-element.

Met deze basisimplementatie werkt de popover, maar verschijnt en verdwijnt hij zonder animatie. Gebruik :popover-open en @starting-style om een vloeiende in- en uitstapanimatie voor de popover te creëren en sta animatie van discrete eigenschappen toe. In het volgende codevoorbeeld wordt de popover in- en uitgeschaald met behulp van de transform: 'scale()' eigenschap.

Dit codevoorbeeld laat zien hoe u in- en uitgangsanimaties implementeert voor de popover API.

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

Om tegemoet te komen aan browsers die de popover API niet ondersteunen, implementeerde Tokopedia de popover-polyfill van Oddbird, die slechts 3,2 KB groot is met gzip-compressie. Ze waren tevreden met de polyfill, omdat deze goed werkte en geen prestatieverlies veroorzaakte. Over het algemeen konden ze met de popover API tot 70% van het aantal regels code in React verminderen.

Tokopedia gebruikt React en het team bereikte codesplitsing door de popover-component te ontkoppelen voor pagina's die het niet gebruiken, en vervolgens een codesplitsing uit te voeren voor de popover-content. Op deze manier verkleinden ze de omvang van hun initiële verzoek.

Overweeg om popovers te combineren met CSS-ankerpositionering ( binnenkort beschikbaar in Chrome ) om ze relatief ten opzichte van andere elementen te positioneren. Dit is bijvoorbeeld handig voor menu's en tooltips.

Bronnen

Introductie van de popover API
Het verschil tussen een popover en een dialoogvenster
Wil je een bug melden of een nieuwe functie aanvragen? We horen graag van je .

Ontdek de andere artikelen in deze serie die gaan over hoe e-commercebedrijven profiteren van nieuwe CSS- en UI-functies zoals scroll-aangedreven animaties, popovers, containerquery's en de has() selector.