Vitral 0.2
Painel

Divider

Uma linha horizontal ou vertical entre conteúdos, sólida, tracejada ou pontilhada, com um conteúdo opcional encaixado nela.

Testado com WAI-ARIA

Importação

main.ts
import { Divider } from '@vitral/vue';

Tipos

SolidDashedDotted
<script setup lang="ts">import { Divider } from '@vitral/vue';</script> <template>    <span>Solid</span>    <Divider />    <span>Dashed</span>    <Divider type="dashed" />    <span>Dotted</span>    <Divider type="dotted" /></template>

Conteúdo

<script setup lang="ts">import { Divider } from '@vitral/vue';</script> <template>    <Divider>Left</Divider>    <Divider align="center">Center</Divider>    <Divider align="right" type="dashed">Right</Divider></template>

Vertical

<script setup lang="ts">import { Button, Divider } from '@vitral/vue';</script> <template>    <div style="display: flex; align-items: center; width: 100%">        <div style="flex: 1; text-align: center">            <Button label="Sign in" />        </div>        <Divider layout="vertical" style="min-height: 6rem">or</Divider>        <div style="flex: 1; text-align: center">            <Button label="Create account" severity="secondary" />        </div>    </div></template>

API

Lido de packages/vue/src/components/Divider/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
layout'horizontal' | 'vertical'—
type'solid' | 'dashed' | 'dotted'—
align'left' | 'center' | 'right' | 'top' | 'bottom'Onde o conteúdo fica ao longo da linha: `left`, `center` ou `right` num divisor horizontal (`left` por padrão), `top`, `center` ou `bottom` num vertical (`center` por padrão).

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Slots

NomeProps do slotDescrição
default—Texto ou um ícone inserido na linha.

Usado nestes templates