组件
Separator
用于内容分组和视觉分隔
Separator
Separator 用于在同一块信息中建立轻量分隔。
导入
import { Separator } from "@downcity/ui";横向分隔
import { Separator } from "@downcity/ui";
export function SectionDivider() {
return (
<div className="flex flex-col gap-4">
<div>基础配置</div>
<Separator />
<div>高级配置</div>
</div>
);
}纵向分隔
import { Separator } from "@downcity/ui";
export function InlineDivider() {
return (
<div className="flex h-5 items-center gap-3">
<span>List</span>
<Separator orientation="vertical" />
<span>Grid</span>
</div>
);
}使用建议
- 横向内容块之间用默认横线
- 行内并列项之间用
orientation="vertical" - 优先使用
Separator，不要自己写border-t