divider

提供分隔器组件分隔不同内容块/内容元素。可用于列表或界面布局。

支持设备

手机	平板	智慧屏	智能穿戴
支持	支持	支持	支持

子组件

不支持。

属性

除支持通用属性外还支持如下属性

名称	类型	默认值	必填	描述
vertical	boolean	false	否	使用水平分割线还是垂直分割线默认水平。

说明

• 不支持focusable、disabled属性。

样式

仅支持如下样式

名称	类型	默认值	必填	描述
margin	<length>	0	否	使用简写属性设置所有的外边距属性该属性可以有1到4个值。
margin-[left|top|right|bottom]	<length>	0	否	使用简写属性设置左、上、右、下外边距属性类型length单位px默认值0。
color	<color>	手机#08000000 智慧屏、智能穿戴#33ffffff	否	设置分割线颜色。
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>时生效。

 

事件

不支持。

示例 

html

<div class="container">
    <div class="content">
        <text>米多奇米饼</text>
        <divider class="divider" vertical="false"></divider>//vertical判断横线水平还是垂直
        <text>吃了都说好</text>
         </div>
        <div class="cc">
            <text>欧浩辰</text>
            <divider class="ss " vertical="true"></divider>
            <text>我宣你</text>
        </div>
</div>

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;
}
.cc{
    flex-direction: row;
    width:80%;
    height:40%;
    border:1px solid #000000;
    align-items: center;
    justify-content: center;
}
.ss{
    margin: 10px;
    color: #ff0000ff;
    stroke-width: 3px;
    line-cap: round;
}

图片