Web Components Divider

    O divisor de Ignite UI for Web Components permite que o autor do conteúdo crie facilmente uma régua horizontal/vertical como uma pausa entre o conteúdo para organizar melhor as informações em uma página.

    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

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

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

defineComponents(IgcDividerComponent);

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

    EleIgcDividerComponent é capaz de exibir imagens, iniciais ou qualquer outro conteúdo, incluindo ícones. Declarar umIgcDividerComponent é tão simples quanto:

    <igc-divider></igc-divider>

    Usage

    Vertical Divider

    Se overtical atributo for definido, a direção do divisor será alterada de horizontal para vertical.

    <igc-divider vertical></igc-divider>

    Type

    Otype atributo determina se deve renderizar uma linha divisóriasolid oudashed uma linha divisória. O valor padrão ésolid.

    <igc-divider type="dashed"></igc-divider>

    Inset Divider

    PodemIgcDividerComponent ser encaixados em ambos os lados. Parainset o divisor, defina omiddle atributo como verdadeiro em combinação com a--inset variável css. Isso vai encolher a linha divisória dos dois lados. O valor padrão domiddle atributo é falso.

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

    O exemplo a seguir ilustra como oIgcDividerComponent pode ser integrado dentro doIgcSelectComponent para distinguir dois grupos de itens.

    <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

    A--inset variável css encolhe o divisor pela quantidade dada desde o início. Se o meio estiver fixo, ele encolherá dos dois lados.

    Color

    A--color variável css define a cor do divisor.

    API References

    Additional Resources