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>

API de Divider

Una breve explicación de las propiedades que realmente necesitan explicación. Puedes ver el resto de las propiedades aquí.

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	Description
as	string	El elemento HTML con el que se renderiza el divisor. Valores posibles: `'div'`, `'hr'`, `'span'`.
vertical	boolean	Si el divisor se renderiza verticalmente en lugar de horizontalmente.
alignContent	string	La alineación del contenido dentro del divisor. Valores posibles: `'start'`, `'center'`, `'end'`.
appearance	string	La apariencia del divisor. Valores posibles: `'default'`, `'accent'`, `'standard'`, `'subtle'`.
inset	boolean	Si el divisor tiene padding en línea aplicado.
ref	HTMLDivElement | HTMLHRElement | HTMLSpanElement	La referencia DOM del elemento divisor; su tipo depende de la propiedad `as`.
children	Snippet	El contenido que se renderizará como etiqueta dentro del divisor.