Visão geral do progresso linear Web Components

    O componente Linear Progress Indicator Ignite UI for Web Components fornece um indicador visual do processo de um aplicativo conforme ele muda. O indicador IgcLinearProgressComponent atualiza sua aparência conforme seu estado muda. Além disso, você pode estilizar esse componente com uma escolha de cores em listras ou sólidos.

    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 usar o IgcLinearProgressComponent, você precisa registrá-lo da seguinte maneira:

    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 Introdução.

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

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

    Progress Types

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

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

    Striped Progress

    Você pode tornar o indicador listrado, usando a striped propriedade:

    Indeterminate Progress

    Se você quiser acompanhar um processo que não é determinado com precisão, poderá definir a indeterminate propriedade.

    Animation Duration

    A animationDuration propriedade é usada para especificar quanto tempo o ciclo de animação deve levar. Ele assume 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 a labelAlign propriedade. Os valores permitidos são superior, inferior, início superior, extremidade superior, início inferior e extremidade inferior.

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

    A labelFormat propriedade pode ser usada para personalizar o IgcLinearProgressComponent 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

    O IgcLinearProgressComponent 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