Divider

Un divider è una linea sottile che raggruppa il contenuto in elenchi e layout.

Utilizzo

Importa il componente:

import 'mdui/components/divider.js';

Importa il tipo TypeScript:

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

Esempio:

<mdui-divider></mdui-divider>

Esempi

Divider Verticale

Per visualizzare il divider verticalmente, aggiungi l'attributo vertical.

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

Sorgente

Margine Sinistro

Per creare un margine del divider da sinistra, aggiungi l'attributo inset. Questo viene tipicamente utilizzato negli elenchi per allineare il divider con il testo a sinistra.

Elemento 1

Elemento 2

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

Sorgente

Margine Centrale

Per aggiungere un margine a entrambi i lati del divider, aggiungi l'attributo middle.

Elemento 1

Elemento 2

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

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`vertical`	`vertical`	`boolean`	`false`
Se è una linea di separazione verticale
`inset`	`inset`	`boolean`	`false`
Se deve rientrare a sinistra
`middle`	`middle`	`boolean`	`false`
Se deve rientrare su entrambi i lati

Capitolo precedente

Dialog

Capitolo successivo

Dropdown