# divider
- [Permission List](#en-us_topic_0000001059340510_section11257113618419)
- [Child Component](#en-us_topic_0000001059340510_section9288143101012)
- [Attribute](#en-us_topic_0000001059340510_section2907183951110)
- [Event](#en-us_topic_0000001059340510_section1398020714187)
- [Style](#en-us_topic_0000001059340510_section5775351116)
- [Example](#en-us_topic_0000001059340510_section230641814493)
The **** component is used to separate content blocks and content elements. It can be used for the list or UI layout.
## Permission List
None
## Child Component
Not supported
## Attribute
Name
Type
Default Value
Mandatory
Description
vertical
boolean
false
No
Whether to use the vertical divider. The default value is false, indicating that the horizontal divider is used.
id
string
-
No
Unique ID of a component.
style
string
-
No
Style declaration of a component.
class
string
-
No
Style class of a component, which is used to refer to a style table.
ref
string
-
No
Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.
data
string
-
No
Attribute set for a component to facilitate data storage and reading.
## Event
Not supported
## Style
Name
Type
Default Value
Mandatory
Description
margin
<length>
0
No
Shorthand attribute to set all margins in a declaration. You can set 1 to 4 values.
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.
color
<color>
#08000000
No
Color of the divider.
stroke-width
<length>
1
No
Width of the divider.
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.
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.
line-cap
string
butt
No
Cap style of the divider. The default value is butt. Available values are as follows:
butt: The ends of the divider are squared off.
round: A rounded cap is added to each end of the divider.
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.
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>.
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>.
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>.
flex-basis
<length>
-
No
Initial length of a child component on the main axis
NOTE:
This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.