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

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

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 Divider is capable of displaying images, initials, or any other content, including icons. Declaring an Divider 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 Divider 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 Divider can be integrated within the Select 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

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub