Pop-ups: Sie sind plötzlich wieder da!

Jhey Tompkins

Das Ziel der Open UI-Initiative ist es, Entwicklern die Arbeit zu erleichtern. Um dieses Ziel zu erreichen, versuchen wir, den problematischeren Mustern entgegenzuwirken, mit denen Entwickler konfrontiert sind. Dies erreichen wir durch bessere auf der Plattform integrierte APIs und Komponenten.

Ein solcher Problembereich sind Pop-ups, die in der offenen Benutzeroberfläche als "Popovers" beschrieben werden.

Popover haben schon lange einen ziemlich polarisierenden Ruf. Dies liegt zum Teil an der Art und Weise, wie sie erstellt und bereitgestellt werden. Sie lassen sich zwar nicht einfach erstellen, haben aber einen großen Mehrwert: Sie leiten Nutzer auf bestimmte Dinge weiter oder machen sie auf den Inhalt Ihrer Website aufmerksam – insbesondere, wenn sie geschmackvoll eingesetzt werden.

Bei der Erstellung von Pop-overs sind häufig zwei wichtige Punkte zu beachten:

  • Hier erfährst du, wie du dafür sorgst, dass es an einer geeigneten Stelle über den übrigen Inhalten platziert wird.
  • Wie Sie sie barrierefrei machen (Tastaturfreundlich, fokussierbar usw.)

Die integrierte Popover API hat verschiedene Ziele mit demselben übergeordneten Ziel, Entwicklern die Erstellung dieses Musters zu erleichtern. Zu diesen Zielen gehören insbesondere:

  • Vereinfachen Sie die Darstellung eines Elements und seiner Nachfolgerelemente über dem Rest des Dokuments.
  • Sorgen Sie dafür, dass Ihre Inhalte barrierefrei sind.
  • Für die gängigsten Verhaltensweisen (leichtes Schließen, Singleton, Stapel usw.) ist kein JavaScript erforderlich.

Die vollständigen Spezifikationen für Pop-ups finden Sie auf der OpenUI-Website.

Browserkompatibilität

Wo können Sie die integrierte Popover API jetzt verwenden? Sie wird in Chrome Canary hinter den experimentellen Funktionen der Webplattform unterstützt als dieser Artikel verfasst wurde.

Öffne Chrome Canary und rufe chrome://flags auf, um dieses Flag zu aktivieren. Aktivieren Sie dann die Option „Experimentelle Webplattform-Funktionen“. melden.

Für Entwickler, die dies in einer Produktionsumgebung testen möchten, gibt es auch einen Ursprungstest.

Für die API wird schließlich noch ein Polyfill entwickelt. Sehen Sie sich das Repository unter github.com/oddbird/popup-polyfill an.

So prüfen Sie, ob Pop-up-Fenster unterstützt werden:

const supported = HTMLElement.prototype.hasOwnProperty("popover");

Aktuelle Lösungen

Was kannst du aktuell tun, um deine Inhalte in den Vordergrund zu rücken? Wenn dies in Ihrem Browser unterstützt wird, können Sie das HTML-Dialogelement verwenden. In „Modal“ aus. Dies erfordert JavaScript.

Dialog.showModal();

Bei der Barrierefreiheit sind einige Punkte zu beachten. Die Verwendung von a11y-dialog wird beispielsweise empfohlen, wenn das Catering für Safari-Nutzer älter als Version 15.4 ist.

Sie können auch eine der vielen verfügbaren Bibliotheken auf der Grundlage von Popover-, Warnmeldungen oder Kurzinfos verwenden. Viele davon funktionieren ähnlich.

  • Hängen Sie einen Container an den Textkörper an, um Pop-over anzuzeigen.
  • Gestalten Sie sie so, dass sie über allen anderen Elementen steht.
  • Erstellen Sie ein Element und hängen Sie es an den Container an, um ein Pop-over anzuzeigen.
  • Sie können es ausblenden, indem Sie das Popover-Element aus dem DOM entfernen.

Dies erfordert eine zusätzliche Abhängigkeit und mehr Entscheidungen für Entwickler. Sie müssen auch recherchieren, um ein Angebot zu finden, das alles enthält, was Sie brauchen. Die Popover API eignet sich für viele Szenarien, einschließlich Kurzinfos. Das Ziel ist es, alle gängigen Szenarien abzudecken, damit Entwickler nicht noch einmal eine Entscheidung treffen müssen, damit sie sich auf die Entwicklung ihrer Erfahrungen konzentrieren können.

Das erste Pop-up

Das ist alles, was du brauchst.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

Aber was passiert hier?

  • Sie müssen das Popover-Element nicht in einen Container oder etwas anderes verschieben. Es ist standardmäßig ausgeblendet.
  • Sie müssen dazu keinen JavaScript-Code schreiben. Das wird über das Attribut popovertoggletarget verwaltet.
  • Sobald es erscheint, wird es auf den obersten Layer hochgestuft. Das bedeutet, dass sie im Darstellungsbereich über der document angezeigt wird. Sie müssen z-index nicht verwalten und sich nicht darum kümmern, wo sich Ihr Pop-over im DOM befindet. Sie könnte tief in das DOM verschachtelt sein, mit Clipping von Ancestors. Mit den Entwicklertools können Sie auch sehen, welche Elemente sich derzeit im obersten Layer befinden. Weitere Informationen zur obersten Ebene finden Sie in diesem Artikel.

GIF zur Demonstration der Unterstützung der obersten Ebene der Entwicklertools

  • Sie erhalten „Leichtes Schließen“ sofort einsatzbereit. Sie können das Pop-over also schließen, indem Sie es schließen, indem Sie z. B. außerhalb des Pop-overs klicken, zu einem anderen Element navigieren oder die Esc-Taste drücken. Öffne sie wieder und probier es aus!

Was bietet Popover sonst noch? Sehen wir uns das Beispiel einmal genauer an. Sehen Sie sich diese Demo mit einigen Inhalten auf der Seite an.

Diese unverankerte Aktionsschaltfläche hat eine feste Position mit einem hohen z-index.

.fab {
  position: fixed;
  z-index: 99999;
}

Der Popover-Inhalt ist im DOM verschachtelt, aber wenn Sie das Popover öffnen, wird er über diesem Element mit fester Position angezeigt. Sie müssen keine Stile festlegen.

Beachten Sie auch, dass das Pop-over jetzt das Pseudoelement ::backdrop hat. Alle Elemente in der obersten Ebene erhalten ein anpassbares ::backdrop-Pseudoelement. In diesem Beispiel wird ::backdrop mit einer reduzierten Alpha-Hintergrundfarbe und einem Hintergrundfilter gestaltet, wodurch der zugrunde liegende Inhalt unkenntlich gemacht wird.

Popover gestalten

Kommen wir nun zur Gestaltung des Popovers. Ein Pop-over hat standardmäßig eine feste Position und einen gewissen Padding. Außerdem ist display: none vorhanden. Sie könnten dies überschreiben, um ein Pop-over anzuzeigen. Das würde sie jedoch nicht auf die oberste Ebene bringen.

[popover] { display: block; }

Unabhängig davon, wie Sie Ihr Pop-over bewerben, müssen Sie es möglicherweise in der obersten Ebene anordnen oder positionieren. Ein Targeting auf die oberste Ebene ist nicht möglich,

:open {
  display: grid;
  place-items: center;
}

Standardmäßig wird ein Pop-over mithilfe von margin: auto in der Mitte des Darstellungsbereichs platziert. In einigen Fällen kann es jedoch sinnvoll sein, die Positionierung explizit zu kommunizieren. Beispiel:

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

Wenn Sie Inhalte mithilfe eines CSS-Rasters oder einer Flexbox in Ihrem Popover anordnen möchten, kann es sinnvoll sein, dies in ein Element zu setzen. Andernfalls müssen Sie eine separate Regel deklarieren, durch die das display geändert wird, sobald sich das Popover im obersten Layer befindet. Wenn es als Standard festgelegt ist, wird es standardmäßig angezeigt und überschreibt display: none.

[popover]:open {
 display: flex;
}

Wenn Sie diese Demo ausprobiert haben, werden Sie feststellen, dass das Pop-over jetzt ein- und ausgeht. Mit der Pseudoauswahl :open können Sie Pop-overs ein- und ausblenden. Der Pseudoselektor :open stimmt mit den Pop-over überein, die angezeigt werden (und damit im obersten Layer).

In diesem Beispiel wird eine benutzerdefinierte Eigenschaft für den Übergang verwendet. Sie können auch einen Übergang auf das ::backdrop-Element des Pop-overs anwenden.

[popover] {
  --hide: 1;
  transition: transform 0.2s;
  transform: translateY(calc(var(--hide) * -100vh))
            scale(calc(1 - var(--hide)));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: calc(1 - var(--hide, 1));
}


[popover]:open::backdrop  {
  --hide: 0;
}

Tipp: Gruppieren Sie Übergänge und Animationen unter einer Medienabfrage für Bewegung. Das kann dir auch dabei helfen, dein Timing einzuhalten. Das liegt daran, dass Sie Werte zwischen popover und ::backdrop nicht über ein benutzerdefiniertes Attribut teilen können.

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

Bisher haben Sie gesehen, wie ein Pop-over mit popovertoggletarget angezeigt wird. Dazu verwenden wir die Option „Licht ausschalten“. Sie erhalten aber auch die Attribute popovershowtarget und popoverhidetarget, die Sie verwenden können. Fügen wir einem Pop-over eine Schaltfläche hinzu, mit der es ausgeblendet wird, und ändern die Ein/Aus-Schaltfläche in popovershowtarget.

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

Wie bereits erwähnt, deckt die Popover API mehr als nur unseren historischen Begriff von Pop-ups ab. Sie können die App für alle Arten von Szenarien wie Benachrichtigungen, Menüs, Kurzinfos usw. erstellen.

Einige dieser Szenarien erfordern unterschiedliche Interaktionsmuster. Interaktionen wie Mouseover. Die Verwendung eines popoverhovertarget-Attributs wurde getestet, ist aber derzeit nicht implementiert.

<div popoverhovertarget="hover-popover">Hover for Code</div>

Wenn Sie den Mauszeiger auf ein Element bewegen, wird das Ziel eingeblendet. Dieses Verhalten kann über CSS-Attribute konfiguriert werden. Diese CSS-Eigenschaften definieren das Zeitfenster für das Bewegen der Maus über ein Element, auf das ein Pop-over reagiert. Bei dem getesteten Standardverhalten wurde nach einem expliziten 0.5s von :hover ein Pop-over eingeblendet. Dann muss zum Schließen das Licht oder ein weiteres Pop-over geöffnet werden (mehr dazu später). Das liegt daran, dass die Dauer für das Ausblenden des Pop-overs auf Infinity festgelegt wurde.

In der Zwischenzeit können Sie JavaScript verwenden, um diese Funktion mit Polyfill zu füllen.

let hoverTimer;
const HOVER_TRIGGERS = document.querySelectorAll("[popoverhovertarget]");
const tearDown = () => {
  if (hoverTimer) clearTimeout(hoverTimer);
};
HOVER_TRIGGERS.forEach((trigger) => {
  const popover = document.querySelector(
    `#${trigger.getAttribute("popoverhovertarget")}`
  );
  trigger.addEventListener("pointerenter", () => {
    hoverTimer = setTimeout(() => {
      if (!popover.matches(":open")) popover.showPopOver();
    }, 500);
    trigger.addEventListener("pointerleave", tearDown);
  });
});

Ein explizites Hover-Fenster hat den Vorteil, dass die Aktion des Nutzers beabsichtigt ist, z. B. wenn er seinen Mauszeiger über ein Ziel bewegt. Das Pop-up-Fenster soll nicht angezeigt werden, es sei denn, dies ist die Absicht des Kunden.

In dieser Demo kannst du den Mauszeiger auf das Ziel bewegen, während das Fenster auf 0.5s eingestellt ist.

Bevor wir uns mit einigen gängigen Anwendungsfällen und Beispielen befassen, sollten wir einige Dinge durchgehen.

Arten von Popover-Effekten

Wir haben Interaktionsverhalten ohne JavaScript behandelt. Aber was ist mit dem Popover-Verhalten als Ganzes? Was ist, wenn Sie die Option "Licht ausschalten" nicht möchten? Oder möchten Sie ein Singleton-Muster auf Ihre Popovers anwenden?

Mit der Popover API können Sie drei Popover-Typen angeben, die sich in ihrem Verhalten unterscheiden.

[popover=auto]/[popover]:

  • Nesting-Unterstützung. Das bedeutet aber nicht nur, dass sie im DOM verschachtelt ist. Ein Stamm-Popover wird folgendermaßen definiert: <ph type="x-smartling-placeholder">
      </ph>
    • die auf die DOM-Position (untergeordnet) bezogen sind.
    • durch das Auslösen von Attributen für untergeordnete Elemente wie popovertoggletarget, popovershowtarget usw.
    • die mit dem Attribut anchor verknüpft sind (CSS Anchoring API in Entwicklung).
  • Licht ausschalten.
  • Andere Popovers, die keine übergeordneten Popover sind, werden beim Öffnen geschlossen. Probieren Sie die Demo unten aus und zeigen Sie, wie das Nesting mit uralten Popovers funktioniert. Sehen Sie sich an, wie sich Änderungen durch das Ändern einiger der popoverhidetarget/popovershowtarget-Instanzen zu popovertoggletarget ergeben.
  • Wird eine Leuchte ausgeblendet, werden alle ausgeblendet, aber nur eine davon im Stapel.

[popover=manual]:

  • Andere Pop-over werden nicht geschlossen.
  • Kein Licht aus.
  • Erfordert explizites Schließen über ein Triggerelement oder JavaScript.

JavaScript API

Wenn Sie mehr Kontrolle über Ihre Pop-over benötigen, können Sie diese Dinge mit JavaScript angehen. Sie erhalten die Methode showPopover und hidePopover. Sie haben außerdem popovershow- und popoverhide-Ereignisse, die überwacht werden sollen:

Pop-over anzeigen js popoverElement.showPopover() So blenden Sie ein Pop-over aus:

popoverElement.hidePopover()

Warten Sie, ob ein Pop-over eingeblendet wird:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Warte, bis ein Pop-over erscheint, und brich das Einblenden ab:

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

Achten Sie darauf, dass ein Pop-over ausgeblendet wird:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

Sie können ein ausgeblendetes Pop-over nicht abbrechen:

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

Prüfen Sie, ob sich ein Pop-over im obersten Layer befindet:

popoverElement.matches(':open')

Dadurch erhalten Sie für einige seltenere Szenarien zusätzliche Leistung. Sie können beispielsweise ein Pop-over nach einem bestimmten Zeitraum der Inaktivität einblenden.

Da diese Demo Pop-overs mit hörbaren Pop-ups enthält, benötigen wir zur Audiowiedergabe JavaScript. Beim Klicken wird das Pop-over ausgeblendet, die Audiodatei wird abgespielt und dann wieder angezeigt.

Bedienungshilfen

Bei der Popover API steht Barrierefreiheit im Vordergrund. Bei Zuordnungen für Barrierefreiheit wird das Pop-over nach Bedarf mit seinem Triggerelement verknüpft. Das bedeutet, dass du keine aria-*-Attribute wie aria-haspopup deklarieren musst, vorausgesetzt, du verwendest eines der auslösenden Attribute wie popovertoggletarget.

Für die Fokusverwaltung können Sie das Attribut „Autofokus“ verwenden, um den Fokus auf ein Element in einem Pop-over zu verschieben. Dies ist dasselbe wie bei einem Dialogfeld, aber der Unterschied tritt auf, wenn der Fokus wieder fokussiert wird, da das Licht ausgeblendet wird. In den meisten Fällen wird durch das Schließen eines Popovers wieder das zuvor fokussierte Element hervorgehoben. Der Fokus wird jedoch beim Ausblenden des Lichts auf ein angeklicktes Element verschoben, sofern es fokussiert werden kann. Weitere Informationen findest du im Abschnitt zur Fokusverwaltung in der erklärenden Anleitung.

Du musst die Vollbildversion öffnen dieser Demo, um zu sehen, wie es funktioniert.

In dieser Demo erhält das fokussierte Element einen grünen Umriss. Versuchen Sie, mit der Tabulatortaste auf der Benutzeroberfläche zu navigieren. Beachten Sie, wo der Fokus zurückgegeben wird, wenn ein Pop-over geschlossen wird. Wenn Sie die Tabulatortaste drücken, wird das Pop-over geschlossen. Das ist so gewollt. Obwohl Popovers ein Fokusmanagement haben, lassen sie den Fokus nicht einfangen. Die Tastaturnavigation erkennt ein Schließen-Signal, wenn der Fokus aus dem Popover bewegt wird.

Verankerung (in Entwicklung)

Bei Pop-overs ist es ein schwieriges Muster, das Element am Trigger zu verankern. Dies ist beispielsweise der Fall, wenn festgelegt ist, dass eine Kurzinfo über dem Trigger angezeigt wird, aber im Dokument gescrollt wird. Diese Kurzinfo könnte vom Darstellungsbereich abgeschnitten werden. Es gibt aktuelle JavaScript-Angebote, um mit diesem Problem umgehen zu können, zum Beispiel die Floating-Benutzeroberfläche. Die Position der Kurzinfo wird so angepasst, dass dies verhindert und die gewünschte Positionsreihenfolge festgelegt wird.

Aber wir möchten, dass Sie dies mit Ihren Stilen definieren können. Neben der Popover API befindet sich eine entsprechende API in Entwicklung. Die Positionierung von CSS-Ankern Mit der API können Sie Elemente per Tethering mit anderen Elementen verbinden. Dabei werden die Elemente so neu positioniert, dass sie nicht vom Darstellungsbereich abgeschnitten werden.

In dieser Demo wird die Anchoring API in ihrem aktuellen Zustand verwendet. Die Position des Bootes reagiert auf die Position des Ankers im Darstellungsbereich.

Hier sehen Sie ein CSS-Snippet, mit dem diese Demo funktioniert. JavaScript ist nicht erforderlich.

.anchor {
  --anchor-name: --anchor;
}
.anchored {
  position: absolute;
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
  @try {
    top: anchor(--anchor bottom);
    left: anchor(--anchor right);
  }
}

Hier finden Sie die Spezifikationen. Für diese API wird auch ein Polyfill erstellt.

Beispiele

Sie wissen nun, was ein Pop-over zu bieten hat und wie es funktioniert. Sehen wir uns nun einige Beispiele an.

Benachrichtigungen

In dieser Demo sehen Sie eine Benachrichtigung.

  • Verwendet [popover=manual].
  • Bei Action Pop-over mit showPopover einblenden.
  • Nach einer Zeitüberschreitung von 2000ms mit hidePopover ausblenden.

Toast

In dieser Demo wird die oberste Ebene verwendet, um Toast-Benachrichtigungen anzuzeigen.

  • Ein Pop-over vom Typ manual fungiert als Container.
  • Neue Benachrichtigungen werden an das Popover angehängt und es wird angezeigt.
  • Sie werden mit der Web Animations API per Klick entfernt und aus dem DOM entfernt.
  • Wenn keine Toasts zum Anzeigen vorhanden sind, wird das Popover ausgeblendet.

Verschachteltes Menü

Diese Demo zeigt, wie ein verschachteltes Navigationsmenü funktionieren könnte.

  • Verwende [popover=auto], da verschachtelte Pop-overs zulässig sind.
  • Verwenden Sie autofocus beim ersten Link jedes Drop-down-Menüs, um per Tastatur zu navigieren.
  • Dies ist ein perfekter Kandidat für die CSS Anchoring API. Für diese Demo können Sie jedoch ein wenig JavaScript verwenden, um die Positionen mithilfe von benutzerdefinierten Eigenschaften zu aktualisieren.
const ANCHOR = (anchor, anchored) => () => {
  const { top, bottom, left, right } = anchor.getBoundingClientRect();
  anchored.style.setProperty("--top", top);
  anchored.style.setProperty("--right", right);
  anchored.style.setProperty("--bottom", bottom);
  anchored.style.setProperty("--left", left);
};

PRODUCTS_MENU.addEventListener("popovershow", ANCHOR(PRODUCT_TARGET, PRODUCTS_MENU));

Da in dieser Demo autofocus verwendet wird, muss sie in der Vollbildansicht geöffnet werden. für die Tastaturnavigation verwenden.

Medien-Pop-over

Diese Demo zeigt, wie Sie Medien zum Pop-up einsetzen können.

  • Zum Ausschalten des Lichts wird [popover=auto] verwendet.
  • JavaScript wartet auf das play-Ereignis des Videos und stellt das Video bereit.
  • Durch das popoverhide-Ereignis für Pop-over wird das Video pausiert.

Popover im Wiki-Stil

Diese Demo zeigt, wie Sie Kurzinfos zu Inline-Inhalten mit Medien erstellen können.

  • Verwendet [popover=auto]. Wenn Sie eine davon anzeigen, werden die anderen ausgeblendet, da sie keine Vorfahren sind.
  • Ausgeliefert auf pointerenter mit JavaScript.
  • Ein weiterer perfekter Kandidat für die CSS Anchoring API.

In dieser Demo wird eine Navigationsleiste mit einem Pop-over erstellt.

  • Zum Ausschalten des Lichts wird [popover=auto] verwendet.
  • Mit autofocus wird das erste Navigationselement hervorgehoben.

Hintergründe verwalten

Diese Demo zeigt, wie Sie Hintergründe für mehrere Pop-over verwalten, bei denen nur ein ::backdrop sichtbar sein soll.

  • Verwenden Sie JavaScript, um eine Liste der sichtbaren Popovers zu verwalten.
  • Wenden Sie einen Klassennamen auf das unterste Popover im obersten Layer an.

Benutzerdefiniertes Cursor-Pop-over

In dieser Demo wird gezeigt, wie Sie mit popover ein canvas auf die oberste Ebene hochstufen und damit einen benutzerdefinierten Cursor anzeigen können.

  • Stufen Sie canvas mit showPopover und [popover=manual] auf die oberste Ebene.
  • Wenn andere Pop-over geöffnet werden, blenden Sie das Pop-over „canvas“ aus und wieder ein, damit es oben angezeigt wird.

Pop-over für Aktionsblatt

Diese Demo zeigt, wie Sie ein Pop-over als Aktionsblatt nutzen können.

  • Das Pop-over soll standardmäßig angezeigt werden, wodurch display überschrieben wird.
  • Die Aktionstabelle wird mit dem Popover-Trigger geöffnet.
  • Wenn das Pop-over eingeblendet wird, erscheint es auf der obersten Ebene und wird in die Ansicht übersetzt.
  • Mit dem Ausschalten der LED kann sie zurückgegeben werden.

Durch Tastatur aktiviertes Pop-over

In dieser Demo wird gezeigt, wie Sie ein Pop-over für die Benutzeroberfläche des Stils der Befehlspalette verwenden können.

  • Verwenden Sie cmd + j, um das Pop-over aufzurufen.
  • input ist auf autofocus fokussiert.
  • Das Kombinationsfeld ist ein zweites popover-Element unter der Haupteingabe.
  • Wenn kein Drop-down-Menü vorhanden ist, wird die Palette geschlossen.
  • Ein anderer Kandidat für die Anchoring API

Zeitgesteuertes Pop-over

In dieser Demo wird nach vier Sekunden ein Pop-over für eine Inaktivität angezeigt. Ein UI-Muster, das häufig in Apps verwendet wird, die sichere Nutzerinformationen enthalten, um ein modales Abmeldefenster anzuzeigen.

  • Verwenden Sie JavaScript, um das Pop-over nach einem bestimmten Zeitraum der Inaktivität anzuzeigen.
  • Setze den Timer bei der Pop-over-Anzeige zurück.

Bildschirmschoner

Ähnlich wie in der vorherigen Demo können Sie Ihrer Website eine Prise skurrile Inhalte und einen Bildschirmschoner hinzufügen.

  • Verwenden Sie JavaScript, um das Pop-over nach einem bestimmten Zeitraum der Inaktivität anzuzeigen.
  • Ausschalten, um den Timer auszublenden und zurückzusetzen.

Caret-Folgen

Diese Demo zeigt, wie ein Pop-over einem Eingabe-Caret folgt.

  • Pop-over basierend auf der Auswahl, dem Schlüsselereignis oder der Sonderzeicheneingabe anzeigen
  • Verwenden Sie JavaScript, um die Position des Popovers mit benutzerdefinierten Eigenschaften auf einem Bereich zu aktualisieren.
  • Dieses Muster erfordert Überlegungen, wie Inhalte gezeigt werden und ob sie barrierefrei sind.
  • Es ist oft in der Benutzeroberfläche und in Apps zur Textbearbeitung zu sehen, in denen Tags hinzugefügt werden können.

Unverankertes Aktionsschaltflächenmenü

Diese Demo zeigt, wie Sie mit einem Pop-over ein unverankertes Aktionsschaltflächenmenü ohne JavaScript implementieren können.

  • Pop-over des Typs manual mit der Methode showPopover hochstufen Das ist die Hauptschaltfläche.
  • Das Menü ist ein weiteres Pop-over, das das Ziel der Hauptschaltfläche ist.
  • Das Menü wird mit „popovertoggletarget“ geöffnet.
  • Mit autofocus können Sie den ersten Menüpunkt einer Sendung hervorheben.
  • Schließt das Menü.
  • Für die Symboldrehung wird :has() verwendet. Weitere Informationen zu :has() finden Sie in diesem Artikel.

Fertig!

Dies ist also eine Einführung in ein Popover, das im Rahmen der Open UI-Initiative später behandelt wird. Vernünftig eingesetzt wird es eine fantastische Ergänzung zur Webplattform.

Weitere Informationen finden Sie unter Open UI (UI öffnen). Das Erklärende Pop-over wird während der Entwicklung der API auf dem neuesten Stand gehalten. Und hier ist die Sammlung für alle Demos.

Danke, dass du da reingeknackt hast!

Foto von Madison Oren auf Unsplash