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'`.

<Divider appearance="standard">Standard Divider</Divider>
<Divider appearance="accent">Accent Divider</Divider>
<Divider appearance="subtle">Subtle Divider</Divider>

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.

<div style="height: 8rem;">
  <Divider vertical>Vertical</Divider>
</div>

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'`.

<Divider alignContent="start">Start Aligned Divider</Divider>
<Divider alignContent="center">Center Aligned Divider</Divider>
<Divider alignContent="end">End Aligned Divider</Divider>

También funciona combinado con la propiedad `vertical`:

<Divider alignContent="start" vertical>Start</Divider>
<Divider alignContent="center" vertical>Center</Divider>
<Divider alignContent="end" vertical>End</Divider>

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.

<Divider inset>Inset Divider</Divider>

Elemento personalizado

La propiedad `as` te permite cambiar el elemento HTML subyacente que renderiza el divisor. Valores posibles: `'div'`, `'hr'`, `'span'`.

<Divider as="hr" />

Propiedades de Divider