1# divider
2
3
4The **\<divider>** component is used to separate content blocks and content elements. It can be used in a list or for UI layout.
5
6> **NOTE**
7>
8> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
9
10## Attributes
11
12In addition to the [universal attributes](js-service-widget-common-attributes.md), the following attributes are supported.
13
14| Name| Type| Default Value| Mandatory| Description|
15| -------- | -------- | -------- | -------- | -------- |
16| vertical | boolean | false | No| Whether to use the vertical divider. The default value is **false**, indicating that the horizontal divider is used.|
17
18
19## Styles
20
21Only the following styles are supported.
22
23| Name| Type| Default Value| Mandatory| Description|
24| -------- | -------- | -------- | -------- | -------- |
25| 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.|
26| 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**.|
27| color | &lt;color&gt; | - | No| Color of the divider.|
28| stroke-width | &lt;length&gt; | 1 | No| Stroke width of the divider.|
29| 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**.|
30| 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.|
31| 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.<br>- **"square"**: A square cap is added to each end of the divider.<br>If the value is **"round"** or **"square"**, the divider length increases by the stroke width.|
32| flex | number | - | No| How to divide available space of the parent component for each divider. 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>**.|
33| flex-grow | number | 0 | No| How much the divider will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. The 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>**.|
34| flex-shrink | number | 1 | No| How much the divider will shrink. The shrink occurs only when the sum of default element widths is greater than that of the parent component. The value **0** indicates that the divider does not shrink.<br>This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**.|
35| flex-basis | &lt;length&gt; | - | No| Initial length of the divider on the main axis.<br>This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**.|
36
37
38## Events
39
40Not supported
41
42
43## Example
44
45
46```html
47<!-- xxx.hml -->
48<div class="container">
49  <div class="content">
50    <divider class="divider" vertical="false"></divider>
51  </div>
52</div>
53```
54
55
56```css
57/* xxx.css */
58.container {
59  margin: 20px;
60  flex-direction:column;
61  width:100%;
62  height:100%;
63  align-items:center;
64}
65.content{
66  width:80%;
67  height:40%;
68  margin-top:100px;
69  border:1px solid #000000;
70  align-items: center;
71  justify-content: center;
72  flex-direction:column;
73}
74.divider {
75  margin: 10px;
76  color: #ff0000ff;
77  stroke-width: 3px;
78  line-cap: round;
79}
80```
81**4 x 4 widget**
82
83![divider](figures/divider.png)
84