Popover-Fallstudien

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

Pop-over sind überall im Web zu finden. Sie werden in Menüs, Tooltips und Dialogfeldern verwendet, z. B. für Kontoeinstellungen, Widgets zur Offenlegung und Produktkarten-Vorschauen. Obwohl diese Komponenten so weit verbreitet sind, ist ihre Erstellung in Browsern immer noch überraschend umständlich. Um dieses Problem zu beheben, wird in Browsern eine neue Reihe deklarativer HTML-APIs für die Erstellung von Pop-over eingeführt. Die erste davon ist die Popover API.

Ein Pop-over wird häufig mit einem Dialogfeld verwechselt. Es gibt jedoch einige wichtige Unterschiede im Verhalten. Ein dialog-Element, das mit dialog.showModal (ein modales Dialogfeld) geöffnet wird, erfordert eine explizite Nutzerinteraktion, um das modale Dialogfeld zu schließen. Ein popover unterstützt das Schließen durch Klicken außerhalb des Pop-overs. Ein modales dialog nicht. Bei einem modalen Dialogfeld wird der Rest der Seite inaktiv. Bei einem popover nicht. Weitere Informationen zu den Unterschieden.

klicken.

Dieser Artikel ist Teil einer Reihe, in der beschrieben wird, wie E-Commerce-Unternehmen ihre Website mit neuen CSS- und UI-Funktionen verbessert haben. In diesem Artikel erfahren Sie, wie Tokopedia die Popover API implementiert hat und davon profitiert.

Tokopedia

Durch die Verwendung von Pop-over-Attributen konnten bis zu 70% der Codezeilen in React reduziert werden. Das modale Dialogfeld kann nativ über HTML gesteuert werden, ohne dass eine Ereignisverarbeitung in JavaScript erforderlich ist und React.createPortal verwendet werden muss, um das modale DOM an das Ende von document.body zu verschieben. Außerdem können wir @starting-style verwenden, um das Öffnen und Schließen des Pop-overs zu animieren. – Andy Wihalim, Senior Software Engineer, Tokopedia.

Die Produktdetailseiten von Tokopedia enthalten mehrere Produktbilder für jedes Produkt. Wenn auf das Produkt-Thumbnail geklickt wird, wird ein modales Dialogfeld geöffnet, in dem das vergrößerte Bild angezeigt wird. Dies ist ein gängiges Muster auf E-Commerce-Websites.

Code

Tokopedia verwendet React für die Frontend-Entwicklung. Vor der Implementierung der Popover API für dieses modale Dialogfeld wurden ein DOM-Dialogfeld und eine Schaltfläche verwendet. Mit der Schaltfläche wurde der React-Status geändert, um das modale Dialogfeld zu öffnen. Mit der Popover API wird im Element, das das Pop-over öffnet, ein popovertarget-Attribut mit einem Wert angegeben, der mit der ID des Pop-over-Elements übereinstimmt.

Bei dieser grundlegenden Implementierung funktioniert das Pop-over, wird aber ohne Animation ein- und ausgeblendet. Wenn Sie eine reibungslose Animation für das Ein- und Ausblenden des Pop-overs erstellen möchten, verwenden Sie :popover-open und @starting-style und lassen Sie die Animation diskreter Eigenschaften zu. Im folgenden Codebeispiel wird das Pop-over mit der Eigenschaft transform: 'scale()' ein- und ausgeblendet.

Dieses Codebeispiel zeigt wie Sie Animationen für das Ein- und Ausblenden für die Popover API implementieren.

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

Für Browser, die die Popover API nicht unterstützen, hat Tokopedia das Pop-over-Polyfill von oddbird implementiert, das mit Gzip-Komprimierung nur 3,2 KB groß ist. Das Unternehmen war mit dem Polyfill zufrieden, da es gut funktionierte und keine Leistungseinbußen verursachte. Insgesamt konnten mit der Popover API bis zu 70% der Codezeilen in React reduziert werden.

Überlegungen zur Verwendung der Popover API

Tokopedia verwendet React. Das Team hat die Codeaufteilung erreicht, indem die Pop-over-Komponente für Seiten, auf denen sie nicht verwendet wird, entfernt und dann eine Codeaufteilung für den Pop-over-Inhalt vorgenommen wurde. So konnte die Größe der ursprünglichen Anfrage reduziert werden.

Sie können Pop-over mit der CSS-Ankerpositionierung (bald in Chrome verfügbar) kombinieren, um sie relativ zu anderen Elementen zu positionieren. Das ist beispielsweise für Menüs und Tooltips hilfreich.

Ressourcen

In den anderen Artikeln dieser Reihe erfahren Sie, wie E-Commerce-Unternehmen von der Verwendung neuer CSS- und UI-Funktionen wie scrollgesteuerte Animationen, Pop-over, Containerabfragen und dem Selektor has() profitiert haben.