React Linear Progress Overview

    O componente Ignite UI for React Linear Progress Indicator fornece um indicador visual do processo de uma aplicação à medida que ele muda. OIgrLinearProgress indicador atualiza sua aparência conforme seu estado muda. Além disso, você pode estilizar esse componente com uma escolha de cores em listras ou lisas.

    React Linear Progress Example

    Usage

    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 oIgrLinearProgress CSS necessário e registrar seu módulo, assim:

    import { IgrLinearProgressModule, IgrLinearProgress } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrLinearProgressModule.register();

    <IgrLinearProgress value="100"></IgrLinearProgress>

    Progress Types

    Você pode definir o tipo do seu indicador, usando ovariant atributo. Existem cinco tipos de indicadores lineares de progresso -primário (padrão), erro, sucesso, informação e aviso.

    <IgrLinearProgress value="100" variant="success"></IgrLinearProgress>

    Striped Progress

    Você pode fazer o indicador listrado, usando astriped propriedade:

    Indeterminate Progress

    Se você quiser rastrear um processo que não está determinado com precisão, pode definir aindeterminate propriedade.

    Animation Duration

    AanimationDuration propriedade é usada para especificar quanto tempo o ciclo de animação deve levar. Ele recebe como valor um número que representa a duração da animação em milissegundos.

    <IgrLinearProgress animationDuration="5000" indeterminate="true"></IgrLinearProgress>

    Text Properties

    Você pode alinhar o valor padrão usando alabelAlign propriedade. Os valores permitidos são top, bottom, top-start, top-end, bottom-start e bottom-end.

    Para ocultar o rótulo padrão do indicador de progresso, use ohideLabel atributo.

    AlabelFormat propriedade pode ser usada para personalizar oIgrLinearProgress rótulo padrão.

    O exemplo a seguir demonstra a configuração acima:

    Dynamic Progress

    Você pode alterar dinamicamente o valor do indicador de progresso usando controles externos como botões. Para conseguir isso, podemos vincular o valor a uma propriedade de classe:

    Styling

    OIgrLinearProgress componente expõe partes CSS para quase todos os seus elementos internos:

    Nome Descrição
    track Área de trilha do anel de progresso.
    fill A área do indicador de progresso.
    striped O indicador de progresso listrado.
    label O rótulo do indicador de progresso.
    value O valor do rótulo de progresso.
    indeterminate O estado indeterminado do progresso.
    primary O indicador de progresso do estado primário.
    danger O estado de erro do indicador de progresso.
    warning O estado de alerta do indicador de progresso.
    info O estado das informações do indicador de progresso.
    success O estado de sucesso do indicador de progresso.

    Usando essas partes CSS, temos controle quase total do estilo Linear Progress.

    igc-linear-progress::part(track){
  background-color: var(--ig-gray-300)
}

igc-linear-progress::part(fill){
  background-color: var(--ig-primary-300)
}

igc-linear-progress::part(label){
  color: var(--ig-primary-300)
}

    API References

    Additional Resources