Web Components Divider

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

    Web Components Divider Example

    Dependencies

    First, you need to install the Ignite UI for Web Components npm package by running the following command:

    npm install igniteui-webcomponents

    import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';

defineComponents(IgcDividerComponent);

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

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

    <igc-divider></igc-divider>

    Usage

    Vertical Divider

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

    <igc-divider vertical></igc-divider>

    Type

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

    <igc-divider type="dashed"></igc-divider>

    Inset Divider

    The IgcDividerComponent 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
<igc-divider middle="true" class="withInset"></igc-divider>
// Left side only 
<igc-divider></igc-divider>

    Using Divider Inside Select Component

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

    <igc-select>
  <igc-select-item>Item 1</igc-select-item>
  <igc-select-item>Item 2</igc-select-item>
  <igc-divider></igc-divider>
  <igc-select-item>Item 3</igc-select-item>
</igc-select>

    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