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 atributo variant. Existem cinco tipos de indicadores de progresso linear -primário (padrão), erro, sucesso, informação e aviso.

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

    Striped Progress

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

    Indeterminate Progress

    Se quiser rastrear um processo que não foi determinado com precisão, você pode definir a propriedade indeterminate.

    Animation Duration

    A propriedade animationDuration é usada para especificar quanto tempo o ciclo de animação deve levar. Ela toma 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 propriedade labelAlign. 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 o atributo hideLabel.

    A propriedade labelFormat pode ser usada para personalizar o rótulo padrão IgcLinearProgressComponent.

    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

    The IgcLinearProgressComponent component exposes CSS parts for almost all of its inner elements:

    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.

    Using this CSS parts we have almost full control of the Linear Progress styling.

    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