Études de cas Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Les pop-overs sont partout sur le Web. Vous pouvez les voir dans des menus, des astuces pour activer/désactiver et utilisées pour des fonctionnalités telles que les paramètres de compte, les widgets d'information et les aperçus des fiches produit. Malgré la prédominance de ces composants, leur création dans les navigateurs reste étonnamment fastidieux. Pour résoudre ce problème, un nouvel ensemble de Les API HTML déclaratives permettant de créer des pop-overs seront bientôt disponibles dans les navigateurs, la première il s'agit de l'API Popover.

Le pop-up fait partie de Baseline Newly Available.

Navigateurs pris en charge

  • Chrome: 114 <ph type="x-smartling-placeholder">
  • Edge: 114 <ph type="x-smartling-placeholder">
  • Firefox: 125 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

Source

Une fenêtre contextuelle est généralement confondue avec une boîte de dialogue. Cependant, il existe des des différences de comportement. Un élément dialog ouvert avec dialog.showModal (boîte de dialogue modale), est une expérience qui nécessite une interaction explicite de l'utilisateur pour fermer la fenêtre modale. popover permet l'arrêt léger. Ce n'est pas le cas d'une dialog modale. Une boîte de dialogue modale rend le reste de la page inerte. Ce n'est pas le cas avec un popover. En savoir plus sur les différences

Cet article fait partie d'une série qui explique comment les entreprises d'e-commerce amélioré son site Web grâce à de nouvelles fonctionnalités CSS et UI. Dans cet article, vous découvrirez comment Tokopedia a implémenté l'API Popover et en a bénéficié.

Tokopedia

L'utilisation d'attributs de pop-over a permis de réduire jusqu'à 70% les lignes de code dans React. La fenêtre modale peuvent être contrôlés de manière native par HTML au lieu de nécessiter une gestion des événements JavaScript et l'utilisation de React.createPortal pour déplacer le DOM modal à la fin de document.body Nous pouvons également utiliser @starting-style pour animer le l'ouverture et la fermeture du pop-up. Andy Wihalim, Senior Software Ingénieur, Tokopedia.

Les pages d'informations détaillées sur les produits de Tokopedia contiennent plusieurs images pour chacune d'elles. produit. Lorsque l'utilisateur clique sur la miniature du produit, une modale s'ouvre pour afficher une image agrandie. Il s'agit d'un modèle couramment utilisé sur les sites Web d'e-commerce.

Code

Tokopedia utilise React pour le développement de l'interface. Avant d'implémenter l'API popover pour cette fenêtre modale, elle a utilisé une modale DOM et un bouton. Bouton modifié l'état React pour ouvrir la fenêtre modale. Avec l'API popover, ils spécifient Attribut popovertarget dans l'élément qui ouvre le pop-over avec une valeur qui est identique à l'ID de l'élément contextuel.

Avec cette implémentation de base, le pop-over fonctionne, mais apparaît et disparaît sans aucune animation. Pour créer une animation d'entrée et de sortie fluide pour utilisez :popover-open et @starting-style, et autorisez l'animation des propriétés discrètes. Dans l'exemple de code suivant, la fenêtre pop-up effectue un scaling vertical et horizontal à l'aide du transform: 'scale()'.

Cet exemple de code montre comment implémenter des animations d'entrée et de sortie pour l'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,
  },
});

Pour répondre aux besoins des navigateurs qui ne prennent pas en charge l'API popover, Tokopedia a implémenté le paramètre popover-polyfill d' lanceredbird ; qui ne fait que 3,2 Ko avec une compression gzip. Ils étaient satisfaits du polyfill car il fonctionnait bien et n'entraînait pas de régressions de performances. Globalement, il s'agissait capable de réduire jusqu'à 70% de lignes de code dans React avec l'API popover.

Éléments à prendre en compte lors de l'utilisation de l'API Popover

Tokopedia utilise React, et l'équipe a réussi à diviser le code en désinstallant le pour les pages qui ne l'utilisent pas, une division du code pop-over. Elle a ainsi réduit la taille de sa demande initiale.

Envisagez de combiner des pop-ups avec le positionnement de l'ancre CSS. (bientôt disponible dans Chrome) pour les positionner par rapport à d’autres éléments. Cela est utile pour les menus et les info-bulles, par exemple.

Ressources

Lisez les autres articles de cette série sur l'e-commerce entreprises ont profité de l'utilisation de nouvelles fonctionnalités CSS et UI, comme animations, pop-over, requêtes de conteneur et sélecteur has().