# Divider 分割线

用于将内容分隔为多个区域。

# 基本用法

标签及内容通过 slot 插入。

<pi-divider>标题</pi-divider>
<pi-divider :custom-style="{ margin: '20rpx 0' }">
<p>
  ------
  <br />
  内容
  <br />
  ------
</p>
</pi-divider>
1
2
3
4
5
6
7
8
9
10

# 分割线颜色

border-color 设置分割线颜色。

<pi-divider
  border-color="#ff5500"
  content-position="left"
  :custom-style="{ margin: '48rpx 0' }"
>
  #FF5500
</pi-divider>
<pi-divider
  border-color="#0b65d1"
  content-position="left"
  :custom-style="{ margin: '48rpx 0' }"
>
  #0B65D1
</pi-divider>
<pi-divider
  border-color="#e02020"
  content-position="left"
  :custom-style="{ margin: '48rpx 0' }"
>
  #E02020
</pi-divider>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 插槽位置

content-position 设置插槽内容的位置。

<pi-divider content-position="left" :custom-style="{ margin: '48rpx 0' }">
  content left
</pi-divider>
<pi-divider content-position="center" :custom-style="{ margin: '48rpx 0' }">
  content center
</pi-divider>
<pi-divider content-position="right" :custom-style="{ margin: '48rpx 0' }">
  content right
</pi-divider>
1
2
3
4
5
6
7
8
9

# 分割线样式

custom-style 绑定分割线样式。

<pi-divider
  :halfline="false"
  border-style="dashed"
  content-position="left"
  :custom-style="{ margin: '48rpx 0' }"
>
  dashed
</pi-divider>
<pi-divider
  :halfline="false"
  border-style="dotted"
  content-position="left"
  :custom-style="{ margin: '48rpx 0' }"
>
  dotted
</pi-divider>
<pi-divider
  :halfline="false"
  border-style="groove"
  content-position="left"
  :custom-style="{ margin: '48rpx 0' }"
>
  groove
</pi-divider>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 自定义样式

<pi-divider border-color="#ff508a" :custom-style="{ margin: '48rpx 0' }">
   <view class="pi-fz-48 pi-fw-500 pi-gray">自定义分割线</view>
 </pi-divider>
1
2
3

# Props

名称 描述 类型 必选 默认值
customStyle 自定义样式,对象形式 Object false -
customClass 自定义样式类,字符串形式 String false -
halfline 是否使用0.5px线 Boolean false true
borderColor 线条颜色 String false #d6e4ef
borderStyle 分割线样式:dashed dotted double等,和style提供的borderStyle一致 String false 'solid'
contentPosition 内容位置 'center' 'left' 'right' false 'center'
contentPadding 内容padding String false '0 24rpx'
contentStyle 内容自定义样式 Object false -

# Slots

名称 描述 插槽内容
default - -
Last updated: 2021/4/29 下午5:31:34
10:44