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,可选值为:
|
flex |
number |
- |
否 |
规定了分割线如何适应父组件中的可用空间。它作为一个简写属性,用来设置组件的flex-grow。
|
flex-grow |
number |
0 |
否 |
设置分割线的伸展因子,指定父组件容器主轴方向上剩余空间(容器本身大小减去所有flex项加起来的大小)的分配系数。0为不伸展。
|
flex-shrink |
number |
1 |
否 |
设置分割线的收缩因子,flex元素仅在默认宽度之和大于容器的时候才会发生收缩,0为不收缩。
|
flex-basis |
<length> |
- |
否 |
设置分割线在主轴方向上的初始大小。
|
文章来源地址https://www.toymoban.com/news/detail-485699.html
事件
不支持。
示例
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;
}
图片
文章来源:https://www.toymoban.com/news/detail-485699.html
到了这里,关于5.7—divider组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!