Skip to content

Divider 分割线

区隔内容的分割线。

基础用法

对不同章节的文本段落进行分割。

轻轻敲醒沉睡的心灵,慢慢张开你的眼睛.
春风不解风情,吹动少年的心
<div>
  <span>轻轻敲醒沉睡的心灵,慢慢张开你的眼睛.</span>
  <el-divider></el-divider>
  <span>春风不解风情,吹动少年的心</span>
</div>

设置文案

可以在分割线上自定义文案内容。

虽然说代码没什么意义,但是组件库可以让代码变得更加美丽
Element3
饿了别叫妈, 叫饿了么
好的美团
为了无法计算的价值
阿里云
<div>
  <span>虽然说代码没什么意义,但是组件库可以让代码变得更加美丽</span>
  <el-divider content-position="left">Element3</el-divider>
  <span>饿了别叫妈, 叫饿了么</span>
  <el-divider>好的美团</el-divider>
  <span>为了无法计算的价值</span>
  <el-divider content-position="right">阿里云</el-divider>
</div>

垂直分割

王者荣耀
英雄联盟
Dota
<div>
  <span>王者荣耀</span>
  <el-divider direction="vertical"></el-divider>
  <span>英雄联盟</span>
  <el-divider direction="vertical"></el-divider>
  <span>Dota</span>
</div>

设置不同样式

可以更改分割线的样式

我方了
我圆了
双倍快乐
<div>
  <span>我方了</span>
  <el-divider divider-style="dashed"></el-divider>
  <span>我圆了</span>
  <el-divider divider-style="dotted"></el-divider>
  <span>双倍快乐</span>
  <el-divider divider-style="double"></el-divider>
</div>

设置不同颜色

可以在分割线上自定义颜色和主题。

我绿了
暗黑3
暗黑模式
暗黑3
<div>
  <span>我绿了</span>
  <el-divider color="green">暗黑3</el-divider>
  <span>暗黑模式</span>
  <el-divider dark color="green">暗黑3</el-divider>
</div>

Divider Attributes

参数说明类型可选值默认值
direction设置分割线方向stringhorizontal | verticalhorizontal
content-position设置分割线文案的位置stringleft | right | centercenter
divider-style设置分割线样式stringsolid | dotted | dashed | doublesolid
color设置分割线颜色stringCSSProperties-
dark设置分割线主题booleantrue | falsefalse