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

Divider 分割线

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

基础用法

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

背景视口

分割上下两段文字

下面这一段是另一组内容

src/App.vue

<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>

import { CfDivider } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <p>第一段</p>
      <CfDivider />
      <p>第二段</p>
    </>
  );
}

import { CfDivider } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <p>第一段</p>
      <CfDivider />
      <p>第二段</p>
    </>
  );
}

三种线型

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

背景视口

solid 实线（默认）

dashed 虚线

dotted 点线

src/App.vue

<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>

import { CfDivider } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfDivider variant="solid">solid 实线</CfDivider>
      <CfDivider variant="dashed">dashed 虚线</CfDivider>
      <CfDivider variant="dotted">dotted 点线</CfDivider>
    </>
  );
}

import { CfDivider } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfDivider variant="solid">solid 实线</CfDivider>
      <CfDivider variant="dashed">dashed 虚线</CfDivider>
      <CfDivider variant="dotted">dotted 点线</CfDivider>
    </>
  );
}

标签对齐

align —— start / center（默认）/ end，控制中部标签的水平位置。

背景视口

左对齐

居中（默认）

右对齐

src/App.vue

<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>

import { CfDivider } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfDivider align="start">左对齐</CfDivider>
      <CfDivider align="center">居中</CfDivider>
      <CfDivider align="end">右对齐</CfDivider>
    </>
  );
}

import { CfDivider } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfDivider align="start">左对齐</CfDivider>
      <CfDivider align="center">居中</CfDivider>
      <CfDivider align="end">右对齐</CfDivider>
    </>
  );
}

竖向分割

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

背景视口

左侧

中间

右侧

src/App.vue

<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>

import { CfDivider } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <span>左侧</span>
      <CfDivider orientation="vertical" />
      <span>中间</span>
      <CfDivider orientation="vertical" variant="dashed" />
      <span>右侧</span>
    </>
  );
}

import { CfDivider } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <span>左侧</span>
      <CfDivider orientation="vertical" />
      <span>中间</span>
      <CfDivider orientation="vertical" variant="dashed" />
      <span>右侧</span>
    </>
  );
}

API

Props

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

Slots / Children

Slot	说明
`default`	居中标签文本，传入后线条会从中部断开为它腾位（React 端：`children`）。仅 `orientation="horizontal"` 时生效。