Divider 分隔线
区隔内容的分隔线。
何时使用
- 对不同段落的文本进行分隔
- 对行内文字、链接进行分隔，例如表格的操作列
- 配合标题作为章节分割
基本使用
最常见的水平分隔线。
虚线
border-style="dashed" 渲染虚线。
自定义颜色
color 改变分隔线颜色。
带文案
把文案放进默认插槽，分隔线会被中断；用 content-position 控制文案位置。
自定义文案样式
content-color 改文字颜色，content-background-color 改文字底色（在彩色背景上常用）。钉死一个固定浅色底时，记得同时钉死文字色，否则深色模式下文字会变白、落在浅底上不可读。
垂直分隔线
direction="vertical" 用于行内分隔，常见于操作列。
虚线 + 文案
border-style="dashed" 与文案 / content-position 可以自由组合，常用于「可选区块分隔」「业务流程节点」。
章节标题分隔
把 <h3> 与 Divider 搭配使用，是长文档 / 长表单常见的「视觉分章」范式。
线型动态切换
border-style 接收响应式值，可以与开关 / 单选联动，便于业务上「打印模式 / 编辑模式」切换。
行内多段分组
垂直 Divider 配合一行多段操作时，可以用多个 c-divider direction="vertical" 把按钮分成「编辑组 / 状态组 / 危险操作组」三段。
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | - | 分隔线颜色 |
| direction | 'horizontal' | 'vertical' | horizontal | 分隔线方向 |
| borderStyle | 'solid' | 'dashed' | solid | 线型 |
| contentPosition | 'left' | 'right' | 'center' | center | 文案位置 |
| contentColor | string | - | 文案文字颜色 |
| contentBackgroundColor | string | - | 文案文字背景色 |