React Divider

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

    React Divider Example

    Dependencies

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

    npm install igniteui-react

    You will then need to import the IgrDivider, its necessary CSS, and register its module, like so:

    import { IgrDividerModule, IgrDivider } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDividerModule.register();

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

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

    <IgrDivider></IgrDivider>

    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.

    <IgrDivider type="dashed"></IgrDivider>

    Inset Divider

    The IgrDivider 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
<IgrDivider middle="true" className="withInset"></IgrDivider>
// Left side only
<IgrDivider  className="withInset"></IgrDivider>

    Using Divider Inside Select Component

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

    <IgrSelect>
  <IgrSelectItem><span>Item 1</span></IgrSelectItem>
  <IgrSelectItem><span>Item 2</span></IgrSelectItem>
  <IgrDivider></IgrDivider>
  <IgrSelectItem><span>Item 2</span></IgrSelectItem>
</IgrSelect>

    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