Popover-casestudies

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Popovers zijn overal op internet te vinden. U kunt ze zien in menu's, schakeltips en dialoogvensters, die worden gebruikt voor functies zoals accountinstellingen, openbaarmakingswidgets en productkaartvoorbeelden. Ondanks hoe gangbaar 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 eerste de Popover API is.

Popover is onderdeel van Baseline Newly Available .

Browserondersteuning

  • Chroom: 114.
  • Rand: 114.
  • Firefox: 125.
  • Safari: 17.

Bron

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 modale dialoog) is een ervaring die expliciete gebruikersinteractie vereist om het modale te sluiten. Een popover ondersteunt lichtuitschakeling. Een modale dialog doet dat niet. Een modaal dialoogvenster maakt de rest van de pagina inert. Een popover doet dat 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. Ontdek in dit artikel hoe Tokopedia de Popover API heeft geïmplementeerd en ervan heeft geprofiteerd.

Tokopedia

Het gebruik van popover-attributen verminderde tot 70% coderegels in React. Het modale kan native worden beheerd door HTML in plaats van dat gebeurtenisafhandeling in JavaScript nodig is en React.createPortal wordt gebruikt om het modale DOM naar het einde van document.body te verplaatsen. We kunnen @starting-style ook gebruiken om het openen en sluiten van de popover te animeren.— Andy Wihalim , Senior Software Engineer, Tokopedia .

De productdetailpagina's (PDP) van Tokopedia bevatten meerdere productafbeeldingen voor elk product. Wanneer op de miniatuur van het product wordt geklikt, wordt een modaal geopend om de vergrote afbeelding weer te geven. Dit is een veel voorkomend patroon dat wordt gebruikt 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 Reageer-status om de modaal te openen. Met de popover-API specificeren ze een popovertarget attribuut in het element dat de popover opent met een waarde die hetzelfde is als de ID van het popover-element.

Met deze basisimplementatie werkt de popover, maar verschijnt en verdwijnt zonder enige animatie. Om een ​​vloeiende in- en uitloopanimatie voor 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 u entry- en exit-animaties voor de popover-API implementeert. 

<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, heeft Tokopedia de popover-polyfill van oddbird geïmplementeerd, 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 geheel genomen konden ze tot 70% coderegels in React verminderen met de popover API.

Dingen waarmee u rekening moet houden bij het gebruik van de Popover API

Tokopedia gebruikt React en het team heeft het splitsen van de code bereikt door de popover-component te ontkoppelen voor pagina's die deze niet gebruiken, en vervolgens een codesplitsing uit te voeren voor de popover-inhoud. Op deze manier hebben ze de omvang van hun oorspronkelijke 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

Ontdek de andere artikelen in deze serie waarin wordt besproken hoe e-commercebedrijven profiteerden van het gebruik van nieuwe CSS- en UI-functies, zoals scrollgestuurde animaties, popover, containerquery's en de has() selector.