Preview Updated 2026-05-10

Divider

Horizontal or vertical divider with three line styles, optional label and alignment.

Basic usage

Without props, renders a single horizontal solid line that separates surrounding content.

分割上下两段文字

下面这一段是另一组内容

<p>First paragraph</p>
<CfDivider />
<p>Second paragraph</p>

<p>First paragraph</p>
<CfDivider />
<p>Second paragraph</p>

variant — solid (default), dashed, or dotted. The default slot becomes the inline label.

solid 实线（默认）

dashed 虚线

dotted 点线

<CfDivider variant="solid">solid</CfDivider>
<CfDivider variant="dashed">dashed</CfDivider>
<CfDivider variant="dotted">dotted</CfDivider>

<CfDivider variant="solid">solid</CfDivider>
<CfDivider variant="dashed">dashed</CfDivider>
<CfDivider variant="dotted">dotted</CfDivider>

align — start, center (default), or end. Controls the horizontal position of the label.

左对齐

居中（默认）

右对齐

<CfDivider align="start">Start</CfDivider>
<CfDivider align="center">Center</CfDivider>
<CfDivider align="end">End</CfDivider>

<CfDivider align="start">Start</CfDivider>
<CfDivider align="center">Center</CfDivider>
<CfDivider align="end">End</CfDivider>

orientation="vertical" switches to a vertical line, useful for separating inline segments. Vertical also supports variant.

左侧

中间

右侧

<span>Left</span>
<CfDivider orientation="vertical" />
<span>Middle</span>
<CfDivider orientation="vertical" variant="dashed" />
<span>Right</span>

<span>Left</span>
<CfDivider orientation="vertical" />
<span>Middle</span>
<CfDivider orientation="vertical" variant="dashed" />
<span>Right</span>

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction
`variant`	`'solid' \| 'dashed' \| 'dotted'`	`'solid'`	Line style
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Label position (horizontal only)