# bz-divider 分割线
# 基本用法
分割线，可自定义线条文字、颜色等
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-content">
<view class="demo-title">bz-divider 分割线</view>
<demo-cell>
<bz-divider />
</demo-cell>
<demo-cell title="文本分割">
<bz-divider
text="分割线"
dividerColor="#1890ff"
/>
</demo-cell>
<demo-cell title="纵向分割">
左边内容
<bz-divider
dividerColor="#1890ff"
isVertical
/>
右边内容
</demo-cell>
<demo-cell title="渐变分割线">
<bz-divider
class="mb-10"
gradual
:gradualColor="['#fefefe', '#ccc']"
text="渐变"
/>
<bz-divider
gradual
:gradualColor="['red', 'blue']"
/>
</demo-cell>
</view>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
展开 刷新 关闭
# 属性说明
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| dividerColor | String | true | - | divider 颜色，如果为渐变线条，此属性失效 |
| text | String | - | - | 中间文字 |
| fontColor | String | #999 | - | 文字颜色 |
| fontSize | String | 13px | - | 文字大小 |
isVertical 1.0.1 | Boolean | false | - | 是否为竖形分割, |
| gradual | Boolean | false | - | 是否为渐变线条，为 true，divideColor 失效 |
| gradualColor | [String,String] | - | - | 渐变色值，提供两个色值即可，由浅至深 |