React Divider

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

    React Divider Example

    Dependencies

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

    npm install igniteui-react

    Você então precisará importar oIgrDivider CSS necessário e registrar seu módulo, assim:

    import { IgrDividerModule, IgrDivider } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDividerModule.register();

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

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

    <IgrDivider></IgrDivider>

    Usage

    Vertical Divider

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

    <IgrDivider vertical></IgrDivider>

    Type

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

    <IgrDivider type="dashed"></IgrDivider>

    Inset Divider

    PodemIgrDivider 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
<IgrDivider middle="true" className="withInset"></IgrDivider>
// Left side only
<IgrDivider  className="withInset"></IgrDivider>

    Using Divider Inside Select Component

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

    <IgrSelect>
  <IgrSelectItem><span>Item 1</span></IgrSelectItem>
  <IgrSelectItem><span>Item 2</span></IgrSelectItem>
  <IgrDivider></IgrDivider>
  <IgrSelectItem><span>Item 2</span></IgrSelectItem>
</IgrSelect>

    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