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

    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.

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

    <igc-divider></igc-divider>

    Usage

    Vertical Divider

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

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

    Type

    O type atributo determina se uma linha divisora ou uma dashed linha divisora deve ser renderizada solid. O valor padrão é solid.

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

    Inset Divider

    O IgcDividerComponent pode ser colocado em ambos os lados. Para inset o divisor, defina o middle atributo como true em combinação com a--inset variável css. Isso diminuirá a linha divisória de ambos os lados. O valor padrão do middle atributo é 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

    O exemplo a seguir ilustra como o IgcDividerComponent pode ser integrado ao IgcSelectComponent 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 reduz o divisor pelo valor fornecido desde o início. Se o meio estiver definido, ele encolherá de ambos os lados.

    Color

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

    API References

    Additional Resources