Überlagerungen

Edge-slide panel

Ein Einstellungsfeld, das bündig am Bildschirmrand anliegt, während die Seite dahinter abgedunkelt und unscharf wird.

Marisol Vega

Saved 2 minutes ago

Handle: @marisolv
Plan: Studio
Team seats: 6 of 10

Click the trigger, or press Escape once open.

Edge-slide panel verwenden

Ein Einstellungsfeld, das bündig am Bildschirmrand anliegt, während die Seite dahinter abgedunkelt und unscharf wird.

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, accent, title, size

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?

Code, Framework-Versionen und Installationsbefehle sind im Arbeitsbereich oben verfügbar.

Verbinde deinen Agenten

Ähnliche Komponenten

1540Sheet drawerÜberlagerungenEin verschiebbares Panel, das von einer Kante über einen abgedunkelten Hintergrund einspringt, den Fokus darin hält und sich bei Escape, der Schließen-Taste oder einem Ziehen an der Kopfzeile schließt.

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.

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.

2271Bottom sheet panelÜberlagerungenEin Blatt im mobilen Stil, das mit einem Greifgriff an der Unterkante angehoben wird und zum Verwerfen wieder nach unten gezogen werden kann.

2119Centered modal frameÜberlagerungenEin einfaches, zentriertes Modal, das vor einem abgedunkelten Hintergrund ausgeblendet und skaliert wird, mit Kopf-, Haupt- und Fußzeile, für alltägliche Formulare und Bestätigungen.

1953Edge slide sheetÜberlagerungenEin Bereich, der vom Bildschirmrand aus eingeschoben wird, um zusätzliche Inhalte wie einen Warenkorb oder Filter aufzunehmen, ohne die aktuelle Seite zu verlassen.