1# divider 2 3The **\<divider>** component is used to separate content blocks and content elements. It can be used for the list or UI layout. 4 5## Required Permissions 6 7None 8 9## Child Components 10 11Not supported 12 13## Attributes 14 15In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. 16 17 18 19| Name | Type | Default Value | Mandatory | Description | 20| -------- | ------- | ------------- | --------- | ------------------------------------------------------------ | 21| vertical | boolean | false | No | Whether to use the vertical divider. The default value is **false**, indicating that the horizontal divider is used. | 22 23>  **NOTE:** The **focusable** and **disabled** attributes are not supported. 24 25## Styles 26 27Only the following style attributes are supported. 28 29 30 31| Name | Type | Default Value | Mandatory | Description | 32| --------------------------------- | -------- | ------------- | --------- | ------------------------------------------------------------ | 33| margin | \<length> | 0 | No | Shorthand attribute to set all margins in a declaration. You can set 1 to 4 values. | 34| margin-[left\|top\|right\|bottom] | \<length> | 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**. | 35| color | \<color> | #08000000 | No | Color of the divider. | 36| stroke-width | \<length> | 1 | No | Width of the divider. | 37| 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**. | 38| 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. | 39| 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.NOTE:If the value is **round** or **square**, the line length increases by the line width. | 40| 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.NOTE:This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**. | 41| flex-grow | number | 0 | No | How much a child component 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. Value **0** indicates that the child component does not grow.NOTE:This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**. | 42| 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.NOTE:This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**. | 43| flex-basis | \<length> | - | No | Initial length of a child component on the main axisNOTE:This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**. | 44 45## Events 46 47Not supported 48 49## Methods 50 51Not supported 52 53## Example 54 55``` 56<!-- xxx.hml --> 57<div class="container"> 58 <div class="content"> 59 <divider class="divider" vertical="false"></divider> 60 </div> 61</div> 62/* xxx.css */ 63.container { 64 margin: 20px; 65 flex-direction:column; 66 width:100%; 67 height:100%; 68 align-items:center; 69} 70.content{ 71 width:80%; 72 height:40%; 73 border:1px solid #000000; 74 align-items: center; 75 justify-content: center; 76 flex-direction:column; 77} 78.divider { 79 margin: 10px; 80 color: #ff0000ff; 81 stroke-width: 3px; 82 line-cap: round; 83} 84``` 85 86
