divider
提供分隔器组件,分隔不同内容块/内容元素。可用于列表或界面布局。
权限列表
无
子组件
不支持。
属性
除支持通用属性外,还支持如下属性:
名称
|
类型
|
默认值
|
必填
|
描述
|
vertical
|
boolean
|
false
|
否
|
使用水平分割线还是垂直分割线,默认水平。
|
说明:
样式
仅支持如下样式:
名称
|
类型
|
默认值
|
必填
|
描述
|
margin
|
<length>
|
0
|
否
|
使用简写属性设置所有的外边距属性,该属性可以有1到4个值。
|
margin-[left|top|right|bottom]
|
<length>
|
0
|
否
|
使用简写属性设置左、上、右、下外边距属性,类型length,单位px,默认值0。
|
color
|
<color>
|
#08000000
|
否
|
设置分割线颜色。
|
stroke-width
|
<length>
|
1
|
否
|
设置分割线宽度。
|
display
|
string
|
flex
|
否
|
确定分割线所产生的框的类型。值flex/none,默认值flex。
|
visibility
|
string
|
visible
|
否
|
是否显示分割线。不可见的框会占用布局。visible代表显示元素,hidden代表不显示元素。
|
line-cap
|
string
|
butt
|
否
|
设置分割线条的端点样式,默认为butt,可选值为:
- butt:分割线两端为平行线;
- round:分割线两端额外添加半圆;
- square:分割线两端额外添加半方形;
说明: round和square会额外增加一个线宽的分割线长度。
|
flex
|
number
|
-
|
否
|
规定了分割线如何适应父组件中的可用空间。它作为一个简写属性,用来设置组件的flex-grow。
说明: 仅父容器为<div>、<list-item>、<tabs>时生效。
|
flex-grow
|
number
|
0
|
否
|
设置分割线的伸展因子,指定父组件容器主轴方向上剩余空间(容器本身大小减去所有flex项加起来的大小)的分配系数。0为不伸展。
说明: 仅父容器为<div>、<list-item>、<tabs>时生效。
|
flex-shrink
|
number
|
1
|
否
|
设置分割线的收缩因子,flex元素仅在默认宽度之和大于容器的时候才会发生收缩,0为不收缩。
说明: 仅父容器为<div>、<list-item>、<tabs>时生效。
|
flex-basis
|
<length>
|
-
|
否
|
设置分割线在主轴方向上的初始大小。
说明: 仅父容器为<div>、<list-item>、<tabs>时生效。
|
事件
不支持。
方法
不支持。
示例
<div class="container">
<div class="content">
<divider class="divider" vertical="false"></divider>
</div>
</div>
.container {
margin: 20px;
flex-direction:column;
width:100%;
height:100%;
align-items:center;
}
.content{
width:80%;
height:40%;
border:1px solid #000000;
align-items: center;
justify-content: center;
flex-direction:column;
}
.divider {
margin: 10px;
color: #ff0000ff;
stroke-width: 3px;
line-cap: round;
}
![](figures/1.jpg)