Vitral 0.2
Panel

Divider

A horizontal or vertical line between pieces of content, solid, dashed or dotted, with optional content set into it.

WAI-ARIA tested

Import

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

Types

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>

Content

<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

Read from packages/vue/src/components/Divider/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
layout'horizontal' | 'vertical'—
type'solid' | 'dashed' | 'dotted'—
align'left' | 'center' | 'right' | 'top' | 'bottom'Where the content sits along the line: `left`, `center` or `right` on a horizontal divider (`left` by default), `top`, `center` or `bottom` on a vertical one (`center` by default).

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Slots

NameSlot propsDescription
default—Text or an icon set into the line.

Used in these templates