Skip to main content

Divider

El componente Divider se usa para separar visualmente elementos en la interfaz.

Uso

import { Divider } from "essential-materials";

Ejemplos

Variantes

Se puede elegir entre tres variantes "solid", "dashed", "dotted".

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nibh nec dolor consequat condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nibh nec dolor consequat condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nibh nec dolor consequat condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nibh nec dolor consequat condimentum.

Grosor

Se puede configurar el grosor de la linea deseado, valor numerico.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nibh nec dolor consequat condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nibh nec dolor consequat condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nibh nec dolor consequat condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nibh nec dolor consequat condimentum.

Separacion

Espacio generado alrededor del divider.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nibh nec dolor consequat condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nibh nec dolor consequat condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nibh nec dolor consequat condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nibh nec dolor consequat condimentum.

Vertical

Cambiar orientacion del divider por vertical.

Lorem

Lorem

Lorem

API

PropiedadTipoDescripciónValores posiblesDefault
orientationstringDirección del divisor"horizontal", "vertical""horizontal"
variantstringEstilo del divisor"solid", "dashed", "dotted""solid"
thicknessnumberGrosor de la líneaCualquier número1
spacingstringEspaciado alrededor del divisor"small", "medium", "large""small"
classNamestringClases CSS personalizadas"" o cualquier clase CSS válida""