DividerSeparador

El componente Divider es una línea fina que separa contenido en listas y contenedores.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/divider.js';

Importa el tipo TypeScript cuando lo necesites:

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

Uso:

<mdui-divider></mdui-divider>

Ejemplos

Separador vertical

El atributo vertical hace que el separador se muestre verticalmente.

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

Fuente

Sangría izquierda

El atributo inset hace que el separador tenga sangría izquierda. Esto se usa a menudo en listas para alinear el separador con el texto de la izquierda.

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>

Fuente

Sangría en ambos lados

El atributo middle hace que el separador tenga sangría en ambos lados.

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>

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`vertical`	`vertical`	`boolean`	`false`
Indica si es un separador vertical.
`inset`	`inset`	`boolean`	`false`
Indica si se aplica sangría a la izquierda.
`middle`	`middle`	`boolean`	`false`
Indica si se aplica sangría a ambos lados.

Capítulo anterior

Dialog Diálogo

Capítulo siguiente

Dropdown Dropdown