divider

权限列表
子组件
属性
事件
样式
示例

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

权限列表

无

子组件

不支持。

属性

名称	类型	默认值	必填	描述
vertical	boolean	false	否	使用水平分割线还是垂直分割线，默认水平。
id	string	-	否	组件的唯一标识。
style	string	-	否	组件的样式声明。
class	string	-	否	组件的样式类，用于引用样式表。
ref	string	-	否	用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。
data	string	-	否	给当前组件设置data属性，进行相应的数据存储和读取。

事件

不支持。

样式

名称	类型	默认值	必填	描述
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>时生效。

示例

<!-- xxx.hml -->
<div class="container">   
  <div class="content">        
    <divider class="divider" vertical="false"></divider>    
  </div>
</div>

/* 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;
}

youguilin / docs

divider

权限列表

子组件

属性

事件

样式

示例

简介

发行版

贡献者

近期动态

youguilin / docs .gitee-modal { width: 500px !important; }

divider

权限列表

子组件

属性

事件

样式

示例

简介

发行版

贡献者

近期动态

搜索帮助

youguilin / docs