Divider
El componente Divider se usa para separar visualmente contenido dentro de un diseño. Puede orientarse horizontal o verticalmente.
Uso
<script>
import { Divider } from 'fluentui-svelte';
</script>
<Divider>Divider</Divider>Apariencia
Controla el color del divisor. Valores posibles: 'standard', 'accent', 'subtle'.
Vertical
Cuando se establece vertical, el divisor se renderiza en el eje vertical en lugar del horizontal. Asegúrate de que el contenedor padre tenga una altura definida para que el divisor sea visible.
Alinear contenido
La propiedad alignContent controla dónde se posiciona el contenido de la etiqueta (children) a lo largo del divisor. Valores posibles: 'start', 'center', 'end'.
También funciona combinado con la propiedad vertical:
Inset
Cuando se establece inset, el divisor obtiene algo de padding en línea, útil cuando se coloca dentro de un contenedor cuyo contenido toca sus bordes.
Elemento personalizado
La propiedad as te permite cambiar el elemento HTML subyacente que renderiza el divisor. Valores posibles: 'div', 'hr', 'span'.
Propiedades de Divider
| Name | Type | Default | Description |
|---|---|---|---|
as | 'div' | 'hr' | 'span' | 'div' | El elemento HTML con el que se renderiza el divider. |
ref bindable | HTMLDivElement | HTMLHRElement | HTMLSpanElement | La referencia del DOM del elemento divider. | |
vertical | boolean | Renderiza el divider en vertical en lugar de en horizontal. | |
alignContent | 'start' | 'center' | 'end' | 'center' | Dónde se sitúa el contenido del divider a lo largo de la línea. |
inset | boolean | Elimina el padding alrededor de la línea del divider. | |
appearance | 'accent' | 'standard' | 'subtle' | 'default' | 'default' | La línea del divider puede estilizarse para dar mayor énfasis o para verse más sutil. |
| HTML Attributes |