Das neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.

Divider

Divider werden verwendet, um Inhalte in Listen und Layouts zu trennen und so eine klarere visuelle Struktur zu schaffen.

Verwendung

Divider sind rein in CSS umgesetzt und werden durch einfachen HTML-Code aktiviert.

Farben

Dunkler Divider für helle Hintergründe
Heller Divider für dunkle Hintergründe
Automatisch anpassender Divider, der sich je nach Seitenthema automatisch auf dunkel oder hell einstellt.

Stil

Divider über die volle Bildschirmbreite

Ein Divider über die volle Bildschirmbreite nimmt 100 % der Breite ein. Die verfügbaren Klassennamen sind:

mdui-divider: Dunkel im Standard-Theme, hell im Dark Theme.
mdui-divider-light: Ein heller Divider für dunkle Hintergründe.
mdui-divider-dark: Ein dunkler Divider für helle Hintergründe.

Beispiel

<div class="mdui-divider"></div>

Eingerückter Divider

Ein eingerückter Divider hat einen Abstand von 72px von links und wird häufig in Listen mit Avataren oder Icons verwendet. Die verfügbaren Klassennamen sind:

mdui-divider-inset: Dunkel im Standard-Theme, hell im Dark Theme.
mdui-divider-inset-light: Ein heller eingerückter Divider für dunkle Hintergründe.
mdui-divider-inset-dark: Ein dunkler eingerückter Divider für helle Hintergründe.

Beispiel

<div class="mdui-divider-inset"></div>

CSS-Klassenliste

Klassenname	Beschreibung
`.mdui-divider`	Definiert einen Divider. Dunkel im Standard-Theme, hell im Dark Theme.
`.mdui-divider-light`	Definiert einen hellen Divider für dunkle Hintergründe.
`.mdui-divider-dark`	Definiert einen dunklen Divider für helle Hintergründe.
`.mdui-divider-inset`	Definiert einen eingerückten Divider. Dunkel im Standard-Theme, hell im Dark Theme.
`.mdui-divider-inset-light`	Definiert einen hellen eingerückten Divider für dunkle Hintergründe.
`.mdui-divider-inset-dark`	Definiert einen dunklen eingerückten Divider für helle Hintergründe.

Select

Expansion Panel