Popover

Weiterleitung

Sie werden in Sekunden weitergeleitet.

Falls keine Weiterleitung erfolgt, klicken Sie auf den Link:

Es ist etwas schief gelaufen.

Upps - das Senden Deiner Anfrage ist fehlgeschlagen. Du kannst uns aber immer via E-Mail erreichen.

Popover

Ein Popover ist eine schwebende Card, die bei Klick oder Hover über dem Anwendungsinhalt geöffnet wird. Sie zeigt zusätzliche Informationen oder Optionen an und bietet Platz für verschiedene Inhalte und Komponenten.

Component--Utility--Popover--Playground

Properties

Properties definieren die Eigenschaften und verschiedenen Ausprägungen einer Komponente. Sie ermöglichen, die Komponente flexibel an unterschiedliche Anforderungen anzupassen. Da Properties in Design und Entwicklung identisch sind, wird die Übergabe vereinfacht und die Konsistenz sichergestellt.

Spacing

(Default) Small, Medium, Large, None

Placement

(Default) bottom, bottom-start, bottom-end, left-start, left, left-end, right-start, right, right-end, top-start, top und top-end

Gap

(Default) False, True

Animation

(Default) True, False

Delay

(Default) None, Slow, Fast

Width

(Default) Auto, Full

Spacing

Die Spacing-Property legt den Innenabstand zwischen dem Inhalt des Popovers und dessen Rand fest. Zur Auswahl stehen Small (Standard), Medium, Large und None.

Placement

Die Placement-Property steuert die Position des Popovers relativ zum Bezugselement. Es stehen 12 verschiedene Platzierungsoptionen zur Verfügung: bottom (Standard), bottom-start, bottom-end, left-start, left, left-end, right-start, right, right-end, top-start, top und top-end. Falls der verfügbare Platz aufgrund der Bildschirmgröße begrenzt ist, wird automatisch eine alternative Platzierung gewählt, um die Sichtbarkeit sicherzustellen.

Gap

Die Gap-Property bestimmt, ob ein Abstand zwischen dem Popover und dem Bezugselement besteht. Bei True wird ein Abstand hinzugefügt, bei False liegt das Popover direkt am Bezugselement an. Der Standardwert ist False.

Animation

Die Animation-Property gibt an, ob das Popover mit einer animierten Einblendung erscheint. Bei True wird eine Animation verwendet, bei False erscheint es ohne Animation. Der Standardwert ist True.

Delay

Die Delay-Property legt fest, ob und wie stark sich das Erscheinen des Popovers verzögert. Zur Auswahl stehen None (keine Verzögerung, Standard), Slow (langsame Verzögerung) und Fast (schnelle Verzögerung).

Width

Die Width-Property steuert die Breite des Popovers. Bei Auto (Standard) passt sich die Breite automatisch an den Inhalt an. Bei Fixed wird eine feste Breite von 240 px gesetzt, um einen kontrollierten Textumbruch zu ermöglichen. Die feste Breite kann bei Bedarf überschrieben werden.

Coming-Soon

Hey du! Schön, dass du hier bist. Leider sind die Informationen, die du gerade suchst, noch nicht verfügbar. Aber keine Sorge, wir arbeiten bereits daran, diese Seite mit allen wichtigen Details zu füllen. Komme gerne etwas später wieder vorbei!🙂

Du hast Fragen oder Input? 

Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!

E-Mail schreiben Feedback in Github