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

    EXAMPLE
    TS
    HTML
    CSS

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Dependencies

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

    npm install igniteui-webcomponents
    cmd
    import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcDividerComponent);
    ts

    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>
    html
    Ignite UI for Web Components | CTA Banner

    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>
    html

    EXAMPLE
    TS
    HTML
    DividerStyling.css
    index.css

    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>
    html

    EXAMPLE
    TS
    HTML
    CSS

    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;
    }
    css
    // Both side
    <igc-divider middle="true" class="withInset"></igc-divider>
    // Left side only 
    <igc-divider></igc-divider>
    html

    EXAMPLE
    TS
    HTML
    DividerStyling.css
    index.css

    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>
    html

    EXAMPLE
    TS
    HTML
    CSS

    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