DividerSeparator

Separator to cienka linia grupująca treść w listach i kontenerach.

Sposób użycia

Zaimportuj komponent:

import 'mdui/components/divider.js';

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

<mdui-divider></mdui-divider>

Przykłady

Separator pionowy

Dodanie atrybutu vertical wyświetli separator w pionie.

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

Źródło

Wcięcie z lewej strony

Dodanie atrybutu inset spowoduje wcięcie separatora z lewej strony. Jest to często używane na listach, aby wyrównać separator z tekstem po lewej stronie.

Pozycja 1

Pozycja 2

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

Źródło

Wcięcie z obu stron

Dodanie atrybutu middle spowoduje wcięcie separatora z obu stron.

Pozycja 1

Pozycja 2

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

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`vertical`	`vertical`	`boolean`	`false`
Określa, czy jest to separator pionowy.
`inset`	`inset`	`boolean`	`false`
Określa, czy dodać wcięcie z lewej strony.
`middle`	`middle`	`boolean`	`false`
Określa, czy dodać wcięcie z obu stron.

Poprzedni rozdział

Dialog Okno dialogowe

Następny rozdział

Dropdown Lista rozwijana