5.7—divider组件
divider
提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。
支持设备
|
手机 |
平板 |
智慧屏 |
智能穿戴 |
|---|---|---|---|
|
支持 |
支持 |
支持 |
支持 |
子组件
不支持。
属性
除支持通用属性外，还支持如下属性：
|
名称 |
类型 |
默认值 |
必填 |
描述 |
|---|---|---|---|---|
|
vertical |
boolean |
false |
否 |
使用水平分割线还是垂直分割线，默认水平。 |
说明
- 不支持focusable、disabled属性。
样式
仅支持如下样式：
|
名称 |
类型 |
默认值 |
必填 |
描述 |
|---|---|---|---|---|
|
margin |
|
0 |
否 |
使用简写属性设置所有的外边距属性，该属性可以有1到4个值。 |
|
margin-[left|top|right|bottom] |
|
0 |
否 |
使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。 |
|
color |
|
手机：#08000000 智慧屏、智能穿戴：#33ffffff |
否 |
设置分割线颜色。 |
|
stroke-width |
|
1 |
否 |
设置分割线宽度。 |
|
display |
string |
flex |
否 |
确定分割线所产生的框的类型。值flex/none，默认值flex。 |
|
visibility |
string |
visible |
否 |
是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。 |
|
line-cap |
string |
butt |
否 |
设置分割线条的端点样式，默认为butt，可选值为：
|
|
flex |
number |
- |
否 |
规定了分割线如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。
|
|
flex-grow |
number |
0 |
否 |
设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数。0为不伸展。
|
|
flex-shrink |
number |
1 |
否 |
设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。
|
|
flex-basis |
|
- |
否 |
设置分割线在主轴方向上的初始大小。
|
事件
不支持。
示例
html
米多奇米饼 //vertical判断横线水平还是垂直 吃了都说好 欧浩辰 我宣你 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;}图片
