分割线 Divider

区隔内容的分割线。可以对对不同文本段落进行分割。可以对行内文字/链接进行分割。

水平分割线

默认为水平分割线，可在中间加入文字。可以是虚线

这是一段文字...这是一段文字...这是一段文字...这是一段文字...这是一段文字...

With Text

这是一段文字...这是一段文字...这是一段文字...这是一段文字...这是一段文字...

<template>
  <p>这是一段文字...这是一段文字...这是一段文字...这是一段文字...这是一段文字...</p>
  <b-divider></b-divider>
  <p>这是一段文字...这是一段文字...这是一段文字...这是一段文字...这是一段文字...</p>
  <b-divider>With Text</b-divider>
  <p>这是一段文字...这是一段文字...这是一段文字...这是一段文字...这是一段文字...</p>
  <b-divider dashed></b-divider>
  <p>这是一段文字...这是一段文字...这是一段文字...这是一段文字...这是一段文字...</p>
</template>

<template>
  <p>这是一段文字...这是一段文字...这是一段文字...这是一段文字...这是一段文字...</p>
  <b-divider></b-divider>
  <p>这是一段文字...这是一段文字...这是一段文字...这是一段文字...这是一段文字...</p>
  <b-divider>With Text</b-divider>
  <p>这是一段文字...这是一段文字...这是一段文字...这是一段文字...这是一段文字...</p>
  <b-divider dashed></b-divider>
  <p>这是一段文字...这是一段文字...这是一段文字...这是一段文字...这是一段文字...</p>
</template>

垂直分割线

使用 type="vertical" 设置为行内的垂直分割线。

Text

Link1

Link2

<template>
  Text
  <b-divider type="vertical"></b-divider>
  <a href="#">Link1</a>
  <b-divider type="vertical"></b-divider>
  <a href="#">Link2</a>
</template>

<template>
  Text
  <b-divider type="vertical"></b-divider>
  <a href="#">Link1</a>
  <b-divider type="vertical"></b-divider>
  <a href="#">Link2</a>
</template>

标题位置

align属性可以设置标题位置使用 align="left" 设置为行内的垂直分割线。

左对齐

居中对齐

右对齐

<template>
  <div>
    <div style="height: 25px">
      <b-divider align="left">左对齐</b-divider>
    </div>
    <div style="height: 25px">
      <b-divider align="center">居中对齐</b-divider>
    </div>
    <div style="height: 25px">
      <b-divider align="right">右对齐</b-divider>
    </div>
  </div>
</template>

<template>
  <div>
    <div style="height: 25px">
      <b-divider align="left">左对齐</b-divider>
    </div>
    <div style="height: 25px">
      <b-divider align="center">居中对齐</b-divider>
    </div>
    <div style="height: 25px">
      <b-divider align="right">右对齐</b-divider>
    </div>
  </div>
</template>

Props

参数	说明	类型	可选值	默认值
type	水平还是垂直类型	String	horizontal / vertical	horizontal
align	分割线标题的位置	String	left / right / center	center
dashed	是否虚线	Boolean	false / true	false

分割线 Divider ​

水平分割线 ​

垂直分割线 ​

标题位置 ​

Props ​

分割线 Divider

水平分割线

垂直分割线

标题位置

Props