Überlagerungen

Edge aware popover

Ein Popover, das aus seinem Auslöser herausspringt und auf die gegenüberliegende Seite klappt oder sich verschiebt, wenn die von Ihnen gewünschte Seite über die Rahmenkante hinausläuft und beim Scrollen festklebt.

Live signals

Checkout pipeline

Scroll the strip, then reopen the panel near an edge to see it flip or shift.

Checkout

Auth

Billing

Webhooks

Queue depth

Cache hit rate

Click the highlighted chip, or press Escape to close it.

Edge aware popover verwenden

Teste die Vorschau mit Maus und Tastatur. Prüfe den sichtbaren Fokus und das Layout auf schmalen Bildschirmen in deiner eigenen Seite. Nenne deinem Agenten die Nummer oder den Bezeichner, um diese Komponente abzurufen.

Eigenschaften: side, offset, avoidCollisions, width, accent

Welche Frameworks sind verfügbar?

Der Katalog enthält diese Versionen: react, vue, svelte, astro, html. Die Vorschau auf dieser Seite verwendet React.

Wie greife ich auf die Implementierung zu?

Vorschau und Beschreibung sind öffentlich. Melde dich mit einem berechtigten Konto an, um Code, Framework-Versionen und Installation zu öffnen.

Verbinde deinen Agenten

Ähnliche Komponenten

1913Anchored settings popoverÜberlagerungenEine Schaltfläche, die ein kleines Einstellungsfeld öffnet, das daneben verankert ist und sich von der Ecke aus erstreckt, die dem Auslöser am nächsten liegt, und die Seiten umdreht, wenn der Platz knapp wird.

1910Anchored detail popoverÜberlagerungenEine Auslöserschaltfläche, die ein kleines verankertes Bedienfeld mit einem betitelten Einstellungsformular öffnet, aus der Auslöserkante herauswächst und sich bei Escape oder einem Klick von außen schließt.

2207Pop scale panelÜberlagerungenEin Popover, das aus halber Größe aufspringt, einen kleinen Pfeil zurück auf seinen Auslöser zeigt, die Seite dahinter abdunkelt und sich bei Escape oder einem Klick von außen schließt.

1911Anchored info popoverÜberlagerungenEine Auslöseschaltfläche, die ein kleines schwebendes Infofeld öffnet, das an einem seiner Ränder verankert ist, von diesem Rand aus ausgeblendet und vergrößert wird und bei einem Klick oder Escape von außen wieder ausgeblendet wird.

1912Anchored popover cardÜberlagerungenEine Auslösetaste, die eine kleine Einstellungskarte öffnet, die an sich selbst verankert ist, sich vom Rand aus verkleinert und bei einem zweiten Klick, Escape oder einem Druck von außen schließt.

2160Grouped backdrop popoverÜberlagerungenEin Popover-Auslöser, der sich in der Nähe seines Ankers mit einem optional abgeblendeten Hintergrund öffnet und jedes gleichgeordnete Popover in seiner Gruppe schließt, sobald es geöffnet wird.