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
| Propiedad | Tipo | Descripción | Valores posibles | Default |
|---|---|---|---|---|
orientation | string | Dirección del divisor | "horizontal", "vertical" | "horizontal" |
variant | string | Estilo del divisor | "solid", "dashed", "dotted" | "solid" |
thickness | number | Grosor de la línea | Cualquier número | 1 |
spacing | string | Espaciado alrededor del divisor | "small", "medium", "large" | "small" |
className | string | Clases CSS personalizadas | "" o cualquier clase CSS válida | "" |