Visão geral do progresso linear Web Components

    O componente Ignite UI for Web Components Linear Progress Indicator fornece um indicador visual do processo de uma aplicação à medida que ele muda. OIgcLinearProgressComponent 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.

    Web Components Linear Progress Example

    Usage

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

    npm install igniteui-webcomponents

    Antes de usá-losIgcLinearProgressComponent, você precisa registrá-los da seguinte forma:

    import {defineComponents, IgcLinearProgressComponent} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcLinearProgressComponent);

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

    A maneira mais simples de começar a usar oIgcLinearProgressComponent é a seguinte:

    <igc-linear-progress value="100"></igc-linear-progress>

    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.

    <igc-linear-progress value="100" variant="success"></igc-linear-progress>

    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.

    <igc-linear-progress animation-duration="5000" indeterminate></igc-linear-progress>

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

    OIgcLinearProgressComponent 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