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

import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDividerComponent);

export class DividerOverview {
    constructor() {
    }
}

new DividerOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Divider Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <p>First paragraph</p>
        <igc-divider></igc-divider>
        <p>Second paragraph</p>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */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

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

import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './DividerStyling.css';

defineComponents(IgcDividerComponent);

export class SelectStyling {
    constructor() {
    }
}

new SelectStyling();
ts


<!DOCTYPE html>
<html>
  <head>
    <title>Vertical Divider</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <div class="content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa officiis
            suscipit veniam vitae. Ab ad, dolores iure nostrum quo ratione rerum
            sapiente ullam. Adipisci alias architecto eligendi est, expedita,
            explicabo fugiat iure laudantium minima molestiae molestias nam
            obcaecati placeat provident, quam repellendus vitae! Cupiditate eveniet,
            facere harum hic quisquam sed.
          </p>
          <igc-divider vertical></igc-divider>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa officiis
            suscipit veniam vitae. Ab ad, dolores iure nostrum quo ratione rerum
            sapiente ullam. Adipisci alias architecto eligendi est, expedita,
            explicabo fugiat iure laudantium minima molestiae molestias nam
            obcaecati placeat provident, quam repellendus vitae! Cupiditate eveniet,
            facere harum hic quisquam sed.
          </p>
        </div>
      </div> 
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

p{
    text-align: justify;
}

.content{
    display:flex;
    gap: 16px;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */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

import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDividerComponent);

export class SelectOverview {
    constructor() {
    }
}

new SelectOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Divider Dashed</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <p>First paragraph</p>
        <igc-divider type="dashed"></igc-divider>
        <p>Second paragraph</p>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */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

import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './DividerStyling.css';

defineComponents(IgcDividerComponent);

export class SelectStyling {
    constructor() {
    }
}

new SelectStyling();
ts


<!DOCTYPE html>
<html>
  <head>
    <title>Divider With Middle Inset</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <div class="parent">
          <div class="content">
              <h4 class="mb">Both sides inset.</h4>
              <igc-divider class="withInset" middle="true"></igc-divider>
              <p class="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias at consectetur dolor magnam maiores nihil quasi quod repudiandae similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi.</p>
          </div>
          <div class="content">
              <h4 class="mb">Left side only(default).</h4>
              <igc-divider class="withInset"></igc-divider>
              <p class="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias at consectetur dolor magnam maiores nihil quasi quod repudiandae similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi.</p>
          </div>
      </div>
      </div>      
  </div> 
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

.parent{
    display: flex;
    justify-content: space-between;   
}

.content{
    width: 45%;    
    padding: 20px;
}

.withInset{
    --inset: 100px;
    --color:red;
}

h4 {
    margin-top: 0;
}
p {
    margin-top: 0;
}
.mt {
    margin-top: 16px;
    margin-bottom: 0;
}
.mb {
    margin-bottom: 16px;
}


css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */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

import { defineComponents, IgcSelectComponent, IgcSelectItemComponent, IgcInputComponent, IgcDividerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSelectComponent, IgcSelectItemComponent, IgcInputComponent, IgcDividerComponent);

export class SelectOverview {
    constructor() {
    }
}

new SelectOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Divider Inside Select</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <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>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */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

IgcDividerComponent

Web Components Divider