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.
<!DOCTYPE html><html><head><title>Divider Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="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) { %><scriptsrc="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:
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.
<!DOCTYPE html><html><head><title>Vertical Divider</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><divclass="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-dividervertical></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) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
<!DOCTYPE html><html><head><title>Divider Dashed</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><p>First paragraph</p><igc-dividertype="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) { %><scriptsrc="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.
<!DOCTYPE html><html><head><title>Divider With Middle Inset</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><divclass="parent"><divclass="content"><h4class="mb">Both sides inset.</h4><igc-dividerclass="withInset"middle="true"></igc-divider><pclass="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><divclass="content"><h4class="mb">Left side only(default).</h4><igc-dividerclass="withInset"></igc-divider><pclass="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) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* 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.
<!DOCTYPE html><html><head><title>Divider Inside Select</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="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) { %><scriptsrc="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.