1# divider
2
3>  **NOTE**
4>
5>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **\<divider>** component is used to separate content blocks and content elements. It can be used for the list or UI layout.
8
9## Required Permissions
10
11None
12
13
14## Child Components
15
16Not supported
17
18
19## Attributes
20
21In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
22
23| Name      | Type     | Default Value  | Mandatory  | Description                  |
24| -------- | ------- | ----- | ---- | -------------------- |
25| vertical | boolean | false | No   | Whether to use the vertical divider. The default value is **false**, indicating that the horizontal divider is used.|
26
27>  **NOTE**
28>
29>  The **focusable** and **disabled** attributes are not supported.
30
31
32## Styles
33
34Only the following styles are supported.
35
36| Name                               | Type            | Default Value       | Mandatory  | Description                                      |
37| --------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- |
38| margin                            | &lt;length&gt; | 0          | No   | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values.           |
39| margin-[left\|top\|right\|bottom] | &lt;length&gt; | 0          | No   | Shorthand attribute of the length type to set left, top, right, and bottom margins attributes. Its unit is px and default value is **0**.|
40| color                             | &lt;color&gt;  | \#08000000 | No   | Color of the divider.                                |
41| stroke-width                      | &lt;length&gt; | 1          | No   | Width of the divider.                                |
42| display                           | string         | flex       | No   | Type of the bounding box generated by the divider. The value can be **flex** or **none**. The default value is **flex**.       |
43| visibility                        | string         | visible    | No   | Whether to display the divider. Invisible dividers also occupy space. **visible** indicates that the divider is displayed, and **hidden** indicates that the divider is not displayed.|
44| line-cap                          | string         | butt       | No   | Cap style of the divider. The default value is **butt**. Available values are as follows:<br>- **butt**: The ends of the divider are squared off.<br>- **round**: A rounded cap is added to each end of the divider. The divider length will increase by the stroke width.<br>- **square**: A square cap is added to each end of the divider. The divider length will increase by the stroke width.|
45| flex                              | number         | -          | No   | How to divide available space of the parent component for each child component. This is a shorthand attribute to set the **flex-grow** attribute.<br>This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**.|
46| flex-grow                         | number         | 0          | No   | How much a child component will grow. The value specifies allocation of the available space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value **0** indicates that the child component does not grow.<br>This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**.|
47| flex-shrink                       | number         | 1          | No   | How much a child component will shrink. The shrink occurs only when the sum of default element widths is greater than that of the parent component. Value **0** indicates that the child component does not shrink.<br>This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**.|
48| flex-basis                        | &lt;length&gt; | -          | No   | Initial length of a child component on the main axis.<br>This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**.|
49
50
51## Events
52
53Not supported
54
55
56## Methods
57
58Not supported
59
60
61## Example
62
63```html
64<!-- xxx.hml -->
65<div class="container">
66  <div class="content">
67    <divider class="divider" vertical="false"></divider>
68  </div>
69</div>
70```
71
72```css
73/* xxx.css */
74.container {
75  margin: 20px;
76  flex-direction:column;
77  width:100%;
78  height:100%;
79  align-items:center;
80}
81.content{
82  width:80%;
83  height:40%;
84  border:1px solid #000000;
85  align-items: center;
86  justify-content: center;
87  flex-direction:column;
88}
89.divider {
90  margin: 10px;
91  color: #ff0000ff;
92  stroke-width: 3px;
93  line-cap: round;
94}
95```
96
97![1-1](figures/1-1.jpg)
98