Überlagerungen

Bottom sheet panel

Ein Blatt im mobilen Stil, das mit einem Greifgriff an der Unterkante angehoben wird und zum Verwerfen wieder nach unten gezogen werden kann.

Daily activity

Today

Current goal: 420 kcal
Logged so far: 286 kcal
Streak: 6 days

Drag the handle down, or press Escape.

Bottom sheet panel verwenden

Ein Blatt im mobilen Stil, das mit einem Greifgriff an der Unterkante angehoben wird und zum Verwerfen wieder nach unten gezogen werden kann.

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: title, accent, dragToDismiss

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.

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.

2340Drag Dismiss Bottom DrawerÜberlagerungenEin Bedienfeld, das mit einem kleinen Ziehgriff von einer Kante her hineingleitet, die Bewegung eines Fingers oder Zeigers mit Gummibandwiderstand verfolgt und je nach der Stärke des Ziehens entweder wieder aufschnappt oder sich löst.

2146Edge-slide panelÜberlagerungenEin Einstellungsfeld, das bündig am Bildschirmrand anliegt, während die Seite dahinter abgedunkelt und unscharf wird.

2441Staggered Offer DrawerÜberlagerungenEine unterste Schublade, die für ein begrenztes Angebot wirbt, wobei Überschrift, Preis und Schaltflächen nacheinander angezeigt werden, anstatt alle auf einmal zu erscheinen.

2445Swipe action rowÜberlagerungenEine Listenzeile im Nachrichtenstil, hinter der beim seitlichen Ziehen farbige Aktionsschaltflächen sichtbar werden.