1# divider
2
3>  **说明：**
4>  从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
5
6提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。
7
8## 权限列表
9
10无
11
12
13## 子组件
14
15不支持。
16
17
18## 属性
19
20除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：
21
22| 名称       | 类型      | 默认值   | 必填   | 描述                   |
23| -------- | ------- | ----- | ---- | -------------------- |
24| vertical | boolean | false | 否    | 使用水平分割线还是垂直分割线，默认水平。 |
25
26>  **说明：**
27>  不支持focusable、disabled属性。
28
29
30## 样式
31
32仅支持如下样式：
33
34| 名称                                | 类型             | 默认值        | 必填   | 描述                                       |
35| --------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- |
36| margin                            | <length> | 0          | 否    | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。            |
37| margin-[left\|top\|right\|bottom] | <length> | 0          | 否    | 使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。 |
38| color                             | <color>  | \#08000000 | 否    | 设置分割线颜色。                                 |
39| stroke-width                      | <length> | 1          | 否    | 设置分割线宽度。                                 |
40| display                           | string         | flex       | 否    | 确定分割线所产生的框的类型。值flex/none，默认值flex。        |
41| visibility                        | string         | visible    | 否    | 是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。 |
42| line-cap                          | string         | butt       | 否    | 设置分割线条的端点样式，默认为butt，可选值为：<br/>-&nbsp;butt：分割线两端为平行线；<br/>-&nbsp;round：分割线两端额外添加半圆，额外增加一个线宽的分割线长度；<br/>-&nbsp;square：分割线两端额外添加半方形，额外增加一个线宽的分割线长度； |
43| flex                              | number         | -          | 否    | 规定了分割线如何适应父组件中的可用空间，用来设置组件的flex-grow。<br>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
44| flex-grow                         | number         | 0          | 否    | 设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数，0为不伸展。<br/>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
45| flex-shrink                       | number         | 1          | 否    | 设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。<br/>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
46| flex-basis                        | &lt;length&gt; | -          | 否    | 设置分割线在主轴方向上的初始大小。<br>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
47
48
49## 事件
50
51不支持。
52
53
54## 方法
55
56不支持。
57
58
59## 示例
60
61```html
62<!-- xxx.hml -->
63<div class="container">
64  <div class="content">
65    <divider class="divider" vertical="false"></divider>
66  </div>
67</div>
68```
69
70```css
71/* xxx.css */
72.container {
73  margin: 20px;
74  flex-direction:column;
75  width:100%;
76  height:100%;
77  align-items:center;
78}
79.content{
80  width:80%;
81  height:40%;
82  border:1px solid #000000;
83  align-items: center;
84  justify-content: center;
85  flex-direction:column;
86}
87.divider {
88  margin: 10px;
89  color: #ff0000ff;
90  stroke-width: 3px;
91  line-cap: round;
92}
93```
94
95![zh-cn_image_0000001173164799](figures/zh-cn_image_0000001173164799.jpg)
96