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.