Divider
divider带文字分隔 · orientation 左/中/右 + dashed/plain + 行内垂直(纯皮肤·零依赖·RSC·与 Separator 互补)
用法
基础用法
不传 children 即纯水平分隔线，分隔上下两段内容。
上段内容
下段内容
tsx
<p>上段内容</p>
<Divider />
<p>下段内容</p>带文字 / 文字位置
传入 children 嵌入文字，orientation 控制文字在左/中/右。
居中标题
最近更新
更多
tsx
<Divider>居中标题</Divider>
<Divider orientation="left">最近更新</Divider>
<Divider orientation="right">更多</Divider>虚线
dashed 切换为虚线，纯线与带文字均生效。
虚线分隔
tsx
<Divider dashed />
<Divider dashed>虚线分隔</Divider>常规字重
plain 让嵌入文字使用常规字重（默认加粗一档）。
常规字重标题
tsx
<Divider plain>常规字重标题</Divider>行内垂直分隔
type="vertical" 嵌在一行元素之间画竖线。
文档组件关于
tsx
<div className="flex items-center text-sm">
<span>文档</span>
<Divider type="vertical" />
<span>组件</span>
<Divider type="vertical" />
<span>关于</span>
</div>何时用
需要在分隔线中嵌入文字标题（如「最近更新」「更多」），或要虚线样式、行内竖线时用 Divider。纯几何分隔、无文字、要 ARIA role="separator" 语义则用 Separator——二者互补：Divider 偏内容装饰，Separator 偏结构语义。
导入
ts
import { Divider } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| type | "horizontal" | "vertical" | "horizontal" | 方向。vertical 为行内分隔（嵌在一行文本/元素之间） |
| orientation | "left" | "center" | "right" | "center" | 嵌入文字的水平位置（仅 horizontal + 有文字时生效） |
| dashed | boolean | false | 虚线 |
| plain | boolean | false | 文字常规字重（默认加粗一档） |
| className | string | — | 额外类名 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 嵌入分隔线中的文字；不传则为纯分隔线 |
禁忌 / 坑
暂无已知坑。orientation 仅在 type="horizontal" 且有 children 时生效；type="vertical" 用作行内竖线，需放在 flex 行内且依赖父级行高。
相关
Playground
分隔标题
<Divider orientation="center">分隔标题</Divider>