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

    Primeiro, você precisa instalar o pacote npm Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';

defineComponents(IgcDividerComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

    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>

    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 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;
}

    // 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 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>

    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