Separator
separator分隔线 · Base UI role=separator + 横/竖几何
用法
水平分隔
默认方向，渲染一条占满宽度的横线分隔上下内容。
瑚琏设计系统
吸取式聚合组件库
tsx
<div className="w-48">
<p>瑚琏设计系统</p>
<Separator className="my-3" />
<p>吸取式聚合组件库</p>
</div>垂直分隔
在 flex 容器内用 orientation="vertical" 撑满高度画竖线。
文档组件主题
tsx
<div className="flex h-6 items-center gap-3">
<span>文档</span>
<Separator orientation="vertical" />
<span>组件</span>
<Separator orientation="vertical" />
<span>主题</span>
</div>何时用
需要一条带 ARIA role="separator" 语义的纯几何分隔线（横线或竖线）时用 Separator——结构性分组、菜单/列表分段。要在分隔线里嵌文字、虚线或左右偏移文字标题则用 Divider。
导入
ts
import { Separator } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | 水平（h-px 横线）/ 垂直（w-px 竖线，需父容器有高度） |
| className | string | — | 额外类名 |
禁忌 / 坑
暂无已知坑。orientation="vertical" 的竖线靠 w-px + 高度撑开，父容器必须有确定高度（如 flex 行 h-6），否则竖线高度为 0 不可见。
相关
Playground
瑚琏设计系统
吸取式聚合组件库
<Separator />