# divider
说明: 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
提供分隔器组件,分隔不同内容块/内容元素。可用于列表或界面布局。
# 权限列表
无
# 子组件
不支持。
# 属性
除支持通用属性外,还支持如下属性:
名称 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
vertical | boolean | false | 否 | 使用水平分割线还是垂直分割线,默认水平。 |
说明: 不支持focusable、disabled属性。
# 样式
仅支持如下样式:
名称 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
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:分割线两端额外添加半方形,额外增加一个线宽的分割线长度; |
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>时生效。 |
# 事件
不支持。
# 方法
不支持。
# 示例
<!-- xxx.mxl -->
<div class="container">
<div class="content">
<divider class="divider" vertical="false"></divider>
</div>
</div>
1
2
3
4
5
6
2
3
4
5
6
/* xxx.css */
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22