Pop-over sind überall im Web zu finden. Sie finden sie in Menüs, Ein-/Aus-Schaltflächen und Dialogfeldern, die für Funktionen wie Kontoeinstellungen, Offenlegungs-Widgets und Produktkartenvorschauen. Diese Komponenten sind zwar weit verbreitet, in Browsern immer noch überraschend umständlich ist. Um dieses Problem zu lösen, Deklarative HTML-APIs zum Erstellen von Popovers sind bald in Browsern verfügbar. Dies ist die Popover API.
Popover ist Teil von Baseline Newly available.
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Ein Pop-over wird häufig mit einem Dialogfeld verwechselt. Es gibt jedoch einige
Unterschiede in ihrem Verhalten. Ein dialog
-Element wurde mit dialog.showModal
geöffnet
(modales Dialogfeld) ist ein Erlebnis, das eine explizite Nutzerinteraktion erfordert, um
Schließen Sie das Dialogfeld. Ein popover
unterstützt die einfache Deaktivierung. Ein modales dialog
-Objekt hingegen tut dies nicht.
Ein modales Dialogfeld macht den Rest der Seite inaktiv. Bei popover
ist das nicht der Fall.
Weitere Informationen zu den Unterschieden
Dieser Artikel ist Teil einer Reihe, in der erläutert wird, wie E-Commerce-Unternehmen die Website mit neuen CSS- und UI-Funktionen optimiert haben. In diesem Artikel erfahren Sie, wie Tokopedia die Popover API implementiert und davon profitierte.
Tokopedia
Durch die Verwendung von Popover-Attributen wurde in React um bis zu 70% der Codezeilen reduziert. Das modale Fenster können nativ über HTML gesteuert werden, sodass keine Ereignisverarbeitung in JavaScript und Verwendung von
React.createPortal
zum Verschieben des modalen DOMs an das Ende desdocument.body
. Wir können auch@starting-style
verwenden, um den das Öffnen und Schließen des Popovers. –Andy Wihalim, Senior Software Engineer, Tokopedia.
Die Produktdetailseiten (Product Detail Pages, PDP) von Tokopedia enthalten jeweils mehrere Produktbilder. Produkt. Wenn auf das Produkt-Thumbnail geklickt wird, wird ein modales Fenster mit dem vergrößertes Bild. Dies ist ein gängiges Muster, das bei E-Commerce-Websites verwendet wird.
Code
Tokopedia nutzt React für die Frontend-Entwicklung. Vor der Implementierung des
Popover API für dieses modale Fenster verwendet wurde, wurden ein DOM-Dialogfeld und eine Schaltfläche verwendet. Die Taste
den Status „React“ geändert, um das modale Fenster zu öffnen. Mit der Popover API geben sie eine
Attribut popovertarget
im Element, das das Pop-over mit einem Wert öffnet
die mit der ID des Popover-Elements übereinstimmt.
Bei dieser einfachen Implementierung funktioniert das Pop-over, aber es erscheint und verschwindet wieder.
ohne Animation. Um eine reibungslose Ein- und Beendigungsanimation für die
Pop-over, :popover-open
und @starting-style
verwenden und Animation von
diskrete Eigenschaften.
Im folgenden Codebeispiel wird das Popover mithilfe der
transform: 'scale()'
.
Dieses Codebeispiel zeigt Implementierung von Eingangs- und Exit-Animationen für die Popover API
<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,
},
});
Für Browser, die das Popover-API nicht unterstützen, hat Tokopedia popover-polyfill von oddbird, die mit gzip-Komprimierung nur 3,2 KB groß ist. Sie waren zufrieden mit dem Polyfill da es gut funktioniert hat und keine Leistungsabfälle verursacht hat. Insgesamt waren sie bis zu 70% Codezeilen in React reduzieren.
Bei der Verwendung der Popover API zu beachtende Punkte
Tokopedia nutzte React und das Team konnte die Codeaufteilung durch Trennen der für Seiten, auf denen sie nicht verwendet wird, und führt dann einen Code-Split für die Popover-Inhalte. Auf diese Weise reduzierte das Team den Umfang der ursprünglichen Anfrage.
Popovers mit CSS-Ankerpositionierung kombinieren (demnächst in Chrome verfügbar) um sie relativ zu anderen Elementen zu positionieren. Dies ist beispielsweise für Menüs und Kurzinfos hilfreich.
Ressourcen
- Die Popover API
- Unterschied zwischen Pop-over und 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 es um E-Commerce geht.
Unternehmen profitierten von neuen CSS- und UI-Funktionen wie Scroll-orientierte
Animationen, Pop-over, Containerabfragen und der has()
-Selektor.