DividerElválasztó

Az elválasztó egy vékony vonal, amely a listák és konténerek tartalmának csoportosítására szolgál.

Használat

A komponens importálása:

import 'mdui/components/divider.js';

A komponens TypeScript-típusának importálása:

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

Példa:

<mdui-divider></mdui-divider>

Példák

Függőleges elválasztó

A vertical attribútummal az elválasztó függőlegesen jelenjen meg.

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

Forrás

Bal oldali behúzás

A inset attribútummal az elválasztó bal oldalon behúzott legyen. Ez gyakran használatos listákban, hogy az elválasztó a bal oldali szöveghez igazodjon.

1. elem

2. elem

<mdui-list>
  <mdui-list-item>1. elem</mdui-list-item>
  <mdui-divider inset></mdui-divider>
  <mdui-list-item>2. elem</mdui-list-item>
</mdui-list>

Forrás

Két oldali behúzás

A middle attribútummal az elválasztó mindkét oldalon behúzott legyen.

1. elem

2. elem

<mdui-list>
  <mdui-list-item>1. elem</mdui-list-item>
  <mdui-divider middle></mdui-divider>
  <mdui-list-item>2. elem</mdui-list-item>
</mdui-list>

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`vertical`	`vertical`	`boolean`	`false`
Függőleges elválasztó legyen-e.
`inset`	`inset`	`boolean`	`false`
Bal oldali behúzással rendelkezzen-e.
`middle`	`middle`	`boolean`	`false`
Mindkét oldali behúzással rendelkezzen-e.

Előző fejezet

Dialog Párbeszédablak

Következő fejezet

Dropdown Lenyíló lista