divider
The <divider> 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>.
|
Example
<div class="container">
<div class="content">
<divider class="divider" vertical="false"></divider>
</div>
</div>
.container {
margin: 20px;
flex-direction:column;
width:100%;
height:100%;
align-items:center;
}
.content{
width:80%;
height:40%;
border:1px solid #000000;
align-items: center;
justify-content: center;
flex-direction:column;
}
.divider {
margin: 10px;
color: #ff0000ff;
stroke-width: 3px;
line-cap: round;
}
![](figures/1.jpg)