Popover API erreicht die Referenzversion

Una Kravets

Es ist so weit! Eine der Funktionen, die mich am meisten begeistern, ist gerade in allen modernen Browsern verfügbar und ist offiziell Teil von Baseline 2024. Diese Funktion ist die Popover API. Popover bietet eine Vielzahl toller Primitiven und Entwickleroptionen zum Erstellen mehrschichtiger Benutzeroberflächen wie Kurzinfos, Menüs, Benutzeroberflächen für das Unterrichten und mehr.

Unterstützte Browser

  • 114
  • 114
  • 125
  • 17

Quelle

Hier sind einige kurze Highlights der Pop-over-Funktionen:

  • Die oberste Ebene erreichen: Pop-over werden im obersten Layer über dem Rest der Seite angezeigt, sodass Sie nicht mit z-index herumspielen müssen.
  • Funktion „Licht schließen“: Wenn Sie auf eine Stelle außerhalb des Pop-over-Bereichs klicken, wird das Pop-over geschlossen und wieder fokussiert.
  • Standardfokusverwaltung: Durch das Öffnen des Popovers stoppt der nächste Tab im Popover.
  • Barrierefreie Tastaturbelegungen. Wenn Sie die esc-Taste drücken oder zweimal wechseln, wird das Pop-over geschlossen und wieder hervorgehoben.
  • Barrierefreie Komponentenbindungen. Ein Popover-Element wird semantisch mit einem Popover-Trigger verbunden.

Popovers erstellen

Das Erstellen von Pop-overs ist ganz einfach. Zur Verwendung von Standardwerten benötigen Sie nur ein button zum Auslösen des Pop-over und ein Element zum Auslösen.

  • Legen Sie zuerst ein popover-Attribut für das Element fest, das das Pop-over sein soll.
  • Fügen Sie dem Popover-Element dann ein eindeutiges id-Element hinzu.
  • Um die Schaltfläche mit dem Pop-over zu verbinden, legen Sie den popovertarget der Schaltfläche auf den Wert des id-Elements des Pop-over-Elements fest.

Dies wird im folgenden Code gezeigt:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
Ein einfaches Beispiel zur Verwendung des Popover-Attributs.

Um eine detailliertere Kontrolle über das Pop-over zu haben, können Sie explizit Popover-Typen festlegen. Die Verwendung eines reinen popover-Attributs ohne Wert entspricht beispielsweise popover="auto". Mit dem Wert auto wird die Option zum Schließen des Lichts aktiviert und andere Pop-over werden automatisch geschlossen. Wenn Sie popover="manual" verwenden, müssen Sie eine Schließen-Schaltfläche hinzufügen. Manuelle Pop-over schließen keine anderen Pop-over und ermöglichen es Nutzern nicht, das Pop-over zu schließen, indem sie auf der Benutzeroberfläche wegklicken. So erstellen Sie ein manuelles Popover:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>
Beispiel für ein manuelles Pop-over

Pop-over- und modales Dialogfeld im Vergleich

Sie fragen sich vielleicht, ob Sie ein Pop-over benötigen, wenn ein Dialogfeld vorhanden ist, und die Antwort lautet: vielleicht nicht.

Es ist wichtig zu beachten, dass das Popover-Attribut keine eigene Semantik bereitstellt. Und obwohl Sie jetzt mit einem Pop-over modale, dialogorientierte Erlebnisse erstellen können, gibt es einige wesentliche Unterschiede zwischen den beiden:

Das modale <dialog>-Element

  • Geöffnet mit dialog.showModal().
  • Bei dialog.close() geschlossen.
  • Dadurch wird der Rest der Seite inaktiv.
  • Das Licht wird nicht unterstützt.
  • Sie können den geöffneten Zustand mit dem Attribut [open] gestalten.
  • Semantisch ist eine interaktive Komponente, die Interaktionen mit dem Rest der Seite blockiert.

Das Attribut [popover]

  • Kann mit einem deklarativen Aufrufer (popovertarget) geöffnet werden.
  • Mit popovertarget (automatisches Pop-over) oder popovertargetaction=hide (manuelles Pop-over) geschlossen.
  • Der Rest der Seite wird nicht inaktiv.
  • Unterstützt das Verhalten beim Ausschalten des Lichts.
  • Sie können den geöffneten Zustand mit der Pseudoklasse :popover-open gestalten.
  • Keine inhärente Semantik.

Fazit und weiterführende Informationen

popover bietet viele spannende Funktionen. Im Folgenden finden Sie einige Empfehlungen für weitere Informationen zu dieser API, einschließlich weiterer Informationen zur Barrierefreiheit der Funktion und Dokumentation zum Funktionssatz: