开发预览更新于 2026-05-10

Divider 分割线

横 / 竖分割线，3 种线型，可带标签和位置控制。

基础用法

无 prop 渲染一条横向实线，把上下文档结构隔开。

背景

分割上下两段文字

下面这一段是另一组内容

<script setup lang="ts">
import { CfDivider } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 28rem;">
    <p>分割上下两段文字</p>
    <CfDivider />
    <p>下面这一段是另一组内容</p>
  </div>
</template>

<script setup>
import { CfDivider } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 28rem;">
    <p>分割上下两段文字</p>
    <CfDivider />
    <p>下面这一段是另一组内容</p>
  </div>
</template>

<p>第一段</p>
<CfDivider />
<p>第二段</p>

<p>第一段</p>
<CfDivider />
<p>第二段</p>

三种线型

variant —— solid 实线（默认）/ dashed 虚线 / dotted 点线。default slot 是中部标签。

背景

solid 实线（默认）

dashed 虚线

dotted 点线

<script setup lang="ts">
import { CfDivider } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 28rem;">
    <CfDivider variant="solid">solid 实线（默认）</CfDivider>
    <CfDivider variant="dashed">dashed 虚线</CfDivider>
    <CfDivider variant="dotted">dotted 点线</CfDivider>
  </div>
</template>

<script setup>
import { CfDivider } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 28rem;">
    <CfDivider variant="solid">solid 实线（默认）</CfDivider>
    <CfDivider variant="dashed">dashed 虚线</CfDivider>
    <CfDivider variant="dotted">dotted 点线</CfDivider>
  </div>
</template>

<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（默认）/ end，控制中部标签的水平位置。

背景

左对齐

居中（默认）

右对齐

<script setup lang="ts">
import { CfDivider } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 28rem;">
    <CfDivider align="start">左对齐</CfDivider>
    <CfDivider align="center">居中（默认）</CfDivider>
    <CfDivider align="end">右对齐</CfDivider>
  </div>
</template>

<script setup>
import { CfDivider } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 28rem;">
    <CfDivider align="start">左对齐</CfDivider>
    <CfDivider align="center">居中（默认）</CfDivider>
    <CfDivider align="end">右对齐</CfDivider>
  </div>
</template>

<CfDivider align="start">左对齐</CfDivider>
<CfDivider align="center">居中</CfDivider>
<CfDivider align="end">右对齐</CfDivider>

<CfDivider align="start">左对齐</CfDivider>
<CfDivider align="center">居中</CfDivider>
<CfDivider align="end">右对齐</CfDivider>

竖向分割

orientation="vertical" 切换成竖线，行内插入用于分隔单行多段文字。竖向也支持 variant。

背景

左侧

中间

右侧

<script setup lang="ts">
import { CfDivider } from '@chufix-design/vue';
</script>

<template>
  <div style="display: flex; align-items: center; gap: 8px;">
    <span>左侧</span>
    <CfDivider orientation="vertical" />
    <span>中间</span>
    <CfDivider orientation="vertical" variant="dashed" />
    <span>右侧</span>
  </div>
</template>

<script setup>
import { CfDivider } from '@chufix-design/vue';
</script>

<template>
  <div style="display: flex; align-items: center; gap: 8px;">
    <span>左侧</span>
    <CfDivider orientation="vertical" />
    <span>中间</span>
    <CfDivider orientation="vertical" variant="dashed" />
    <span>右侧</span>
  </div>
</template>

<span>左侧</span>
<CfDivider orientation="vertical" />
<span>中间</span>
<CfDivider orientation="vertical" variant="dashed" />
<span>右侧</span>

<span>左侧</span>
<CfDivider orientation="vertical" />
<span>中间</span>
<CfDivider orientation="vertical" variant="dashed" />
<span>右侧</span>

API

Prop	类型	默认值	说明
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	方向
`variant`	`'solid' \| 'dashed' \| 'dotted'`	`'solid'`	线型
`align`	`'start' \| 'center' \| 'end'`	`'center'`	标签位置（仅 horizontal）