Divider 分割线

分割线用于区分内容区域、表单分组和列表边界。VISTA B 直接使用 Element Plus 的 el-divider，全局分割线宽度统一为 1px；颜色按弱、常规、强调三档使用。

分割线规范

全局分割线宽度为 1px。根据视觉强度选择不同颜色，不通过加粗来制造层级。

最弱分割线

#E7E8EB（#152038: 6%）

常规分割线

#D0D2D7（#152038: 10%）

强调分割线

#B8BCC3（#152038: 20%）

.divider-weak {
  border-color: #e7e8eb;
}

.divider-regular {
  border-color: #d0d2d7;
}

.divider-strong {
  border-color: #b8bcc3;
}

基础用法

默认分割线为水平线，使用常规分割线色。

上方内容

下方内容

<span>上方内容</span>
<el-divider />
<span>下方内容</span>

带文字的分割线

在分割线中放入文字，可用于解释分组。文字位置通过 content-position 控制。

左侧标题

Left

居中标题

Center

右侧标题

Right

<el-divider content-position="left">Left</el-divider>
<el-divider>Center</el-divider>
<el-divider content-position="right">Right</el-divider>

垂直分割线

垂直分割线用于行内文字、链接或操作之间的轻量分隔。

编辑

复制

删除

<span>编辑</span>
<el-divider direction="vertical" />
<span>复制</span>
<el-divider direction="vertical" />
<span>删除</span>

虚线分割线

通过 border-style 可切换分割线样式。虚线适合用于弱提示或临时占位区域。

虚线分割线

内容继续

<el-divider border-style="dashed" />

关联基础规范

图片中的同页规范还包含圆角和阴影。圆角、阴影不属于 el-divider 本身，但会影响分割线所在容器的视觉层级。

无圆角

border-radius: 0px

常规圆角

border-radius: 8px

基础投影 / 下拉框

0 2px 4px rgba(20, 40, 50, .16)

浅色投影 / 卡片

0 2px 12px 0 rgba(20, 40, 50, .10)

气泡投影 / 提示

0 4px 6px 0 rgba(20, 40, 50, .30)

.radius-none {
  border-radius: 0;
}

.radius-base {
  border-radius: 8px;
}

.shadow-base {
  box-shadow: 0 2px 4px rgba(20, 40, 50, 0.16);
}

.shadow-light {
  box-shadow: 0 2px 12px 0 rgba(20, 40, 50, 0.1);
}

.shadow-popover {
  box-shadow: 0 4px 6px 0 rgba(20, 40, 50, 0.3);
}

API

Divider 属性

属性	说明	类型	默认值
direction	分割线方向	horizontal / vertical	horizontal
content-position	分割线文字位置	left / center / right	center
border-style	分割线样式	CSS border-style	solid

Divider 插槽

插槽	说明
default	分割线文字内容

基础变量

变量	说明	值
--vista-border-soft	最弱分割线	#e7e8eb
--vista-border	常规分割线	#d0d2d7
--vista-border-strong	强调分割线	#b8bcc3
--el-border-radius-base	常规圆角	8px
--vista-shadow-base	基础投影 / 下拉框	0 2px 4px rgba(20, 40, 50, 0.16)
--vista-shadow-light	浅色投影 / 卡片	0 2px 12px 0 rgba(20, 40, 50, 0.1)
--vista-shadow-popover	气泡投影 / 提示	0 4px 6px 0 rgba(20, 40, 50, 0.3)