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();

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

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

• Ignite UI for React Forums
• Ignite UI for React GitHub