Blazor Divider

    The Ignite UI for Blazor Divider allows the content author to easily create a horizontal/vertical rule as a break between content to better organize information on a page.

    Blazor Divider Example

    Dependencies

    Before using the IgbDivider, you need to register it as follows:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbDividerModule));

    You will also need to link an additional CSS file to apply the styling to the IgbDivider component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    For a complete introduction to the Ignite UI for Blazor, read the Getting Started topic.

    The IgbDivider is capable of displaying images, initials, or any other content, including icons. Declaring an IgbDivider is as simple as:

    <IgbDivider></IgbDivider>

    Usage

    Vertical Divider

    If the Vertical attribute is set the direction of the divider would be changed from horizontal to vertical.

    <igrDivider Vertical></igrDivider>

    Type

    The Type attribute determines whether to render a solid or a dashed divider line. The default value is solid.

    <IgbDivider Type="dashed"></igrDivider>

    Inset Divider

    The IgbDivider can be set in on both sides. To inset the divider, set the Middle attribute to true in combination with the --inset css variable. This will shrink the divider line from both sides. The default value of the Middle attribute is false.

    /* DividerStyles.css */
.withInset{
    --inset: 100px;
    --color:red;
}

    // Both side
<IgbDivider Middle="True" class="withInset"</igrDivider>
// Left side only 
<IgbDivider class="withInset"</igrDivider>

    Using Divider Inside Select Component

    The following sample illustrates how the IgbDivider can be integrated within the IgbSelect in order to distinguish two groups of items.

    <IgbSelect>
 <IgbSelectItem>Item 1</IgbSelectItem>
 <IgbSelectItem>Item 2</IgbSelectItem>
 <IgbDivider></IgbDivider>
 <IgbSelectItem>Item 2</IgbSelectItem>
</IgbSelect>

    CSS Variables

    Inset

    The --inset css variable shrinks the divider by the given amount from the start. If middle is set it will shrink from both sides.

    Color

    The --color css variable sets the color of the divider.

    API References

    Additional Resources