通用
Divider
分隔线组件，用于在内容之间创建视觉分隔
分隔线（Divider）用于在页面内容之间创建视觉分隔，支持水平和垂直方向，可附带标签文本。组件基于 Radix Separator 封装，提供边框样式、标签对齐和尺寸控制。
import { Divider, DividerRoot, DividerLabel } from '@skyroc/web-ui';架构说明
Divider 由两个结构组件组成：
DividerRoot：分隔线根容器，渲染为 Radix Separator，负责方向和边框样式。DividerLabel：标签文本，绝对定位在分隔线中央或指定对齐位置。
Divider 主组件自动组合二者，传入 children 时渲染标签，否则仅渲染纯分隔线。
何时使用
- 在同一页面中区分不同内容区块。
- 列表项或表单区域之间需要视觉分隔。
- 需要带标签文本的分隔线（如"或"、"更多"）。
- 工具栏或导航中需要垂直分隔不同操作组。
基础用法
传入 children 作为分隔线上的标签文本，不传则渲染纯分隔线。
Preview
Code
Loading...
边框样式
通过 border 控制分隔线的线条样式。
| 样式 | 说明 |
|---|---|
solid | 实线（默认） |
dashed | 虚线 |
dotted | 点线 |
Preview
Code
Loading...
标签对齐
通过 align 控制标签在分隔线上的水平位置。
| 对齐 | 说明 |
|---|---|
start | 靠左对齐 |
center | 居中（默认） |
end | 靠右对齐 |
Preview
Code
Loading...
垂直方向
设置 orientation="vertical" 将分隔线切换为垂直方向，适合在行内元素之间使用。
Preview
Code
Loading...
API
Divider
通用属性参考：支持 Radix Separator 的 decorative、asChild 属性，以及原生 div 元素属性。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 标签内容，传入时在分隔线上显示文本 | ReactNode | - |
| orientation | 分隔线方向 | 'horizontal' | 'vertical' | 'horizontal' |
| border | 边框线条样式 | 'solid' | 'dashed' | 'dotted' | 'solid' |
| align | 标签对齐位置（有 children 时生效） | 'start' | 'center' | 'end' | 'center' |
| size | 标签文本尺寸和间距 | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' |
| leading | 前置插槽，位于标签之前 | ReactNode | - |
| trailing | 后置插槽，位于标签之后 | ReactNode | - |
| className | 根容器的 class，优先级低于 classNames.root | ClassValue | - |
| classNames | 各 slot 的自定义 class（root / label） | DividerUi | - |
| decorative | 是否为纯装饰性分隔线（true 时不输出 ARIA role） | boolean | - |
子组件
Divider 也导出基础结构组件，适合需要手动组合 Root 和 Label 的场景。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| DividerRoot | 分隔线根容器，支持 Radix Separator props、border 和 className | DividerRootProps | - |
| DividerLabel | 标签文本，支持 align、orientation、size 和 className | DividerLabelProps | - |
类型
DividerUi
Divider 各 slot 的自定义 class 配置。
| 字段 | 类型 | 说明 |
|---|---|---|
| root | ClassValue | 根容器（分隔线）的 class。 |
| label | ClassValue | 标签文本的 class。 |
DividerRootProps
根容器属性。继承 Radix Separator props，并增加 className、size 和 border。
| 字段 | 类型 | 说明 |
|---|---|---|
| className | ClassValue | 根容器 class。 |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 尺寸。 |
| orientation | 'horizontal' | 'vertical' | 方向。 |
| border | 'solid' | 'dashed' | 'dotted' | 边框样式。 |
| decorative | boolean | 是否为装饰性分隔线。 |
| asChild | boolean | 将渲染委托给子元素。 |
DividerLabelProps
标签属性。继承 span 元素属性，并增加 className、size、align 和 orientation。
| 字段 | 类型 | 说明 |
|---|---|---|
| className | ClassValue | 标签 class。 |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 标签文本尺寸。 |
| align | 'start' | 'center' | 'end' | 标签对齐位置。 |
| orientation | 'horizontal' | 'vertical' | 分隔线方向，影响标签间距方向。 |