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, gebruikt voor functies zoals accountinstellingen, uitklapwidgets 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, waarvan de Popover API de eerste is.

Een popover wordt vaak verward met een dialoogvenster. Er zijn echter enkele belangrijke verschillen in hun gedrag. Een dialog dat wordt geopend met dialog.showModal (een modaal dialoogvenster) vereist expliciete interactie van de gebruiker om het te sluiten. Een popover ondersteunt het sluiten van een popover met een lichte klik. Een modaal dialog niet. Een modaal dialoogvenster zorgt ervoor dat de rest van de pagina inactief blijft. Een popover niet. Lees meer over de verschillen .

Dit artikel maakt deel uit van een serie waarin wordt besproken hoe e-commercebedrijven hun website hebben verbeterd met behulp van nieuwe CSS- en UI-functies. In dit artikel ontdek je hoe Tokopedia de Popover API heeft geïmplementeerd en er profijt van heeft gehad.

Tokopedia

Door gebruik te maken van popover-attributen is het aantal regels code in React met wel 70% verminderd. De modal kan nu rechtstreeks via HTML worden aangestuurd, in plaats van dat er gebeurtenisafhandeling in JavaScript nodig is en React.createPortal moet 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 productdetailpagina's (PDP's) van Tokopedia bevatten meerdere productafbeeldingen voor elk product. Wanneer op de miniatuur van een product wordt geklikt, wordt een pop-upvenster geopend met de vergrote afbeelding. Dit is een veelgebruikt patroon op e-commercewebsites.

Code

Tokopedia gebruikt React voor hun frontend-ontwikkeling. Voordat ze de popover-API voor deze modal implementeerden, gebruikten ze een DOM-modal en een knop. De knop veranderde de React-status om de modal te openen. Met de popover-API specificeren ze een popovertarget attribuut in het element, waardoor de popover wordt geopend met een waarde die gelijk is aan de ID van het popover-element.

Met deze basisimplementatie werkt de popover wel, maar verschijnt en verdwijnt zonder animatie. Om een vloeiende animatie voor het verschijnen en verdwijnen van de popover te creëren, gebruikt u :popover-open en @starting-style en staat u animatie van afzonderlijke eigenschappen toe. In het volgende codevoorbeeld schaalt de popover in en uit met behulp van de eigenschap ` transform: 'scale()' .

Dit codevoorbeeld laat zien hoe je animaties voor het openen en sluiten van een popover kunt implementeren 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 met gzip-compressie slechts 3,2 KB groot is. Ze waren tevreden met de polyfill, omdat deze goed werkte en geen prestatieverlies veroorzaakte. Al met al konden ze met de popover-API tot wel 70% van de regels code in React verminderen.

Tokopedia maakt gebruik van React, en het team heeft code splitting bereikt door de popover-component te verwijderen voor pagina's die deze niet gebruiken, en vervolgens de inhoud van de popover te splitsen. Op deze manier hebben ze de grootte van hun initiële verzoek verkleind.

Overweeg om popovers te combineren met CSS-ankerpositionering ( binnenkort beschikbaar in Chrome ) om ze 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 bespreken hoe e-commercebedrijven profiteerden van nieuwe CSS- en UI-functies zoals scroll-driven animations, popover, container queries en de has() selector.