Divider
The divider component enables users to separate content both horizontally and vertically.
Angular Divider Example
By default the divider is a solid horizontal line.
Usage
<igx-divider></igx-divider>
Vertical Divider
By adding the vertical
attribute and setting its value to true
, you can change the direction of the divider from horizontal to vertical.
<igx-divider [vertical]="true"></igx-divider>
Dashed Divider
The default style of the divider is a solid
line but it can also be dashed
.
To change the default look simply use the type
attribute of the divider and set its value to dashed
.
<igx-divider type="dashed"></igx-divider>
Inset Divider
The divider can be set in on both sides.
To inset the divider, set the middle
attribute of the divider to true
and provider the desired inset
value, the divider will start shrinking from both ends.
Keep in mind that you have to add unit(px,rem,%...) at the end of the value otherwise, it will not work.
// Both side
<igx-divider [middle]="true" inset="80px"></igx-divider>
// Left side only
<igx-divider inset="40px"></igx-divider>
If the value of the middle
attribute is set to a falsy value, or if the attribute is omitted altoghether, the divider will set in only on the left.
API References
Additional Resources
Our community is active and always welcoming to new ideas.