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.
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 vondocument.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
- Einführung in die Popover API
- Der Unterschied zwischen einem Pop-over und einem Dialogfeld
- Möchtest du einen Fehler melden oder eine neue Funktion vorschlagen? Ihre Meinung ist uns wichtig.
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.