Divider

Ein Divider ist eine dünne Linie, die zur Gruppierung von Inhalten in Listen und Containern verwendet wird.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/divider.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

import type { Divider } from 'mdui/components/divider.js';

Beispiel:

<mdui-divider></mdui-divider>

Mit dem Attribut vertical wird der Divider vertikal angezeigt.

<div style="height: 80px;padding: 0 20px">
  <mdui-divider vertical></mdui-divider>
</div>

Quellcode

Mit dem Attribut inset rücken Sie den Divider links ein. Dies wird oft in Listen verwendet, um den Divider an den linken Text auszurichten.

Item 1

Item 2

<mdui-list>
  <mdui-list-item>Item 1</mdui-list-item>
  <mdui-divider inset></mdui-divider>
  <mdui-list-item>Item 2</mdui-list-item>
</mdui-list>

Quellcode

Mit dem Attribut middle rücken Sie den Divider beidseitig ein.

Item 1

Item 2

<mdui-list>
  <mdui-list-item>Item 1</mdui-list-item>
  <mdui-divider middle></mdui-divider>
  <mdui-list-item>Item 2</mdui-list-item>
</mdui-list>

Quellcode

Attribut	Property	Typ	Standard
`vertical`	`vertical`	`boolean`	`false`
Zeigt die Trennlinie vertikal an.
`inset`	`inset`	`boolean`	`false`
Fügt einen Einzug von der linken Seite hinzu.
`middle`	`middle`	`boolean`	`false`
Fügt Einzüge von der linken und rechten Seite hinzu.

Vorherige Seite

Dialog

Nächste Seite

Dropdown