Loading dashboard...

分割线 / Divider

当需要从表格的某一行提取数据并展开为完整信息，以避免页面显得空旷时，可用分割线组织内容层级。

基础分割线

用于快速划分区块。

示例代码

<Divider />
<Divider dashed />

带文字分割

用于强调区块标题或状态提示。

关键字段

订单详情

示例代码

<Divider>关键字段</Divider>
<Divider plain>订单详情</Divider>

尺寸与方向

适用于侧边栏或密集信息区。

紧凑

强调

说明更多

合同编号：CN-2025-038更新时间：2 小时前

竖线分隔

用于链接或操作项之间的竖向分隔。

Link1

Link2

Link3

示例代码

<div className="flex items-center gap-3">
  <a href="#">Link1</a>
  <Divider orientation="vertical" plain className="h-4" />
  <a href="#">Link2</a>
  <Divider orientation="vertical" plain className="h-4" />
  <a href="#">Link3</a>
</div>

按钮分隔

在线条中间放置一个带边框的按钮。

示例代码

<Divider plain>
  <Button variant="outline" size="sm" className="gap-1">
    展开更多
    <ChevronDown className="size-4" />
  </Button>
</Divider>

Loading dashboard...