Popover-Fallstudien

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Pop-over sind überall im Web zu finden. Sie können sie in Menüs, Ein-/Aus-Schaltflächen und Dialogfeldern sehen, die für Funktionen wie Kontoeinstellungen, Offenlegungs-Widgets und Produktkartenvorschauen verwendet werden. Trotz der vielen Verbreitung dieser Komponenten ist deren Erstellung in Browsern erstaunlich umständlich. Zur Behebung dieses Problems werden in Browsern neue deklarative HTML APIs zum Erstellen von Pop-overs eingeführt. Die erste ist die Popover API.

Popover ist Teil von Baseline Newly verfügbar.

Unterstützte Browser

  • 114
  • 114
  • 125
  • 17

Quelle

Ein Pop-over wird häufig mit einem Dialog verwechselt. Es gibt jedoch einige wichtige Unterschiede in ihrem Verhalten. Ein dialog-Element, das mit dialog.showModal (ein modales Dialogfeld) geöffnet wird, ist ein Vorgang, bei dem eine explizite Nutzerinteraktion zum Schließen des modalen Dialogfelds erforderlich ist. Ein popover unterstützt die Lichtabschaltung. Bei einem modalen dialog ist das nicht der Fall. Ein modales Dialogfeld macht den Rest der Seite inaktiv. Bei popover ist dies nicht der Fall. Weitere Informationen zu den Unterschieden

Dieser Artikel ist Teil einer Reihe, in der erläutert wird, wie E-Commerce-Unternehmen ihre Website mithilfe neuer CSS- und UI-Funktionen optimieren. In diesem Artikel erfahren Sie, wie Tokopedia die Popover API implementiert und von ihr profitiert.

Tokopedia

Durch die Verwendung von Pop-over-Attributen wurden in React bis zu 70% weniger Codezeilen verwendet. Das modale Fenster kann nativ über HTML gesteuert werden, anstatt die Ereignisverarbeitung in JavaScript zu erfordern. Außerdem muss React.createPortal verwendet werden, um das modale DOM an das Ende von document.body zu verschieben. Wir können auch @starting-style verwenden, um das Öffnen und Schließen des Pop-overs zu animieren – Andy Wihalim, Senior Software Engineer, Tokopedia.

Auf den Produktdetailseiten (Product Detail Pages, PDP) von Tokopedia sind für jedes Produkt mehrere Produktbilder zu sehen. Wenn auf die Miniaturansicht des Produkts geklickt wird, wird ein modales Fenster geöffnet, in dem das vergrößerte Bild angezeigt wird. Dies ist ein gängiges Muster, das bei E-Commerce-Websites verwendet wird.

Code

Tokopedia nutzt React für die Front-End-Entwicklung. Vor der Implementierung der Popover API für dieses modale Fenster wurden ein DOM-Dialogfeld und eine Schaltfläche verwendet. Durch die Schaltfläche wurde der React-Status geändert, sodass das modale Fenster geöffnet wird. Mit der Popover API geben sie ein popovertarget-Attribut im Element an, das das Popover mit einem Wert öffnet, der mit der ID des Popover-Elements übereinstimmt.

Mit dieser einfachen Implementierung funktioniert das Pop-over zwar, wird aber ohne Animation angezeigt und wieder verschwindet. Verwenden Sie :popover-open und @starting-style und lassen Sie die Animation diskreter Eigenschaften zu, um eine reibungslose Start- und Exit-Animation für das Pop-over zu erstellen. Im folgenden Codebeispiel wird das Pop-over mithilfe des Attributs transform: 'scale()' hoch- und herunterskaliert.

In diesem Codebeispiel wird gezeigt, wie Ein- und Ausstiegsanimationen für die Popover API implementiert werden.

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

Tokopedia hat für Browser, die die Popover API nicht unterstützen, popover-polyfill von oddbird implementiert, das nur 3,2 KB mit gzip-Komprimierung umfasst. Sie waren mit Polyfill zufrieden, da es gut funktionierte und nicht zu Leistungseinbußen führte. Insgesamt konnte das Unternehmen in React mit der Popover API bis zu 70% weniger Codezeilen schreiben.

Bei Verwendung der Popover API zu beachtende Punkte

Tokopedia nutzt React. Das Team erreichte die Codeaufteilung, indem die Popover-Komponente für Seiten, auf denen sie nicht verwendet wurde, getrennt wurde. Anschließend wurde eine Codeaufteilung für den Popover-Inhalt durchgeführt. So konnte die ursprüngliche Anfrage reduziert werden.

Sie können Pop-over mit CSS-Ankerpositionen kombinieren (demnächst in Chrome verfügbar), um sie relativ zu anderen Elementen zu positionieren. Dies ist beispielsweise hilfreich für Menüs und Kurzinfos.

Ressourcen

Lesen Sie die anderen Artikel dieser Reihe, in denen beschrieben wird, wie E-Commerce-Unternehmen von der Verwendung neuer CSS- und UI-Funktionen wie Scroll-Animationen, Pop-over-Animationen, Container-Abfragen und dem has()-Selektor profitiert haben.