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.

背景

分割上下两段文字

下面这一段是另一组内容

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>First paragraph</p>
      <CfDivider />
      <p>Second paragraph</p>
    </>
  );
}

Three line styles

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

背景

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>
    </>
  );
}

Label alignment

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

背景

左对齐

居中（默认）

右对齐

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">Start</CfDivider>
      <CfDivider align="center">Center</CfDivider>
      <CfDivider align="end">End</CfDivider>
    </>
  );
}

Vertical divider

orientation="vertical" switches to a vertical line, useful for separating inline segments. Vertical also supports 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>Left</span>
      <CfDivider orientation="vertical" />
      <span>Middle</span>
      <CfDivider orientation="vertical" variant="dashed" />
      <span>Right</span>
    </>
  );
}

API

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)