# 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
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
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
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
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
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 | - | - |