Visão geral do componente Progresso Linear Angular

    O componente Ignite UI for Angular Linear Progress Bar Indicator fornece um indicador visual do processo de um aplicativo conforme ele muda. O indicador atualiza sua aparência conforme seu estado muda. O indicador pode ser estilizado com uma escolha de cores em listras ou sólidos.

    Angular Exemplo de progresso linear

    Introdução ao Ignite UI for Angular Progresso Linear

    Para começar a usar o componente Ignite UI for Angular Linear Progress, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar o IgxProgressBarModule no arquivo app.module.ts:

    // app.module.ts ... import { IgxProgressBarModule } from 'igniteui-angular'; // import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ ... imports: [..., IgxProgressBarModule], ... }) export class AppModule {}

    Como alternativa, a partir da 16.0.0, você pode importar o IgxLinearProgressBarComponent como uma dependência autônoma ou usar o token IGX_LINEAR_PROGRESS_BAR_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

    // home.component.ts import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular'; // import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package @Component({ selector: 'app-home', template: '<igx-linear-bar [value]="progress"></igx-linear-bar>', styleUrls: ['home.component.scss'], standalone: true, imports: [IGX_LINEAR_PROGRESS_BAR_DIRECTIVES], /* or imports: [IgxLinearProgressBarComponent] */ }) export class HomeComponent { public progress = 50; }

    Agora que você importou o módulo Ignite UI for Angular Progress Bar ou as diretivas, você pode começar a usar o componente igx-linear-bar.

    Usando o Angular progresso linear

    Para entender melhor como tudo funciona, vamos criar um exemplo simples, como o da demonstração:

    <igx-linear-bar [value]="100"></igx-linear-bar>

    Depois disso, você deverá ver o exemplo de demonstração no seu navegador.

    Tipos de progresso

    Você pode definir o tipo da sua barra usando o atributo type. Existem cinco tipos de barras de progresso linear -default, error, success, info e warning.

    Progresso listrado

    Você pode tornar a barra listrada, usando a propriedade striped e definindo-a como true.

    Vamos ver como podemos criar diferentes tipos de barras de progresso que podem ser listradas ou não.

    <div class="linear-container"> <igx-linear-bar [value]="100" type="default"></igx-linear-bar> <igx-linear-bar [value]="100" type="success" [striped]="true"></igx-linear-bar> <igx-linear-bar [value]="100" type="error"></igx-linear-bar> <igx-linear-bar [value]="100" type="info" [striped]="true"></igx-linear-bar> <igx-linear-bar [value]="100" type="warning"></igx-linear-bar> </div>

    Então, se configurarmos tudo corretamente, você deverá ver o seguinte no seu navegador:

    Progresso indeterminado

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

    Duração da animação

    A propriedade de entrada animationDuration é usada para especificar quanto tempo o ciclo de animação deve durar.

    O exemplo a seguir especifica a duração da animação definida como 5 segundos.

    <igx-linear-bar [striped]="false" [value]="100" [animationDuration]="5000"></igx-linear-bar>

    Propriedades do texto

    Você pode alinhar o texto usando a propriedade textAlign. Os valores permitidos são left, center e right.

    Para ocultar o texto, use a propriedade textVisibility e defina seu valor como false.

    Defina a propriedade textTop como true para mover o texto acima da barra.

    A propriedade text pode ser usada para personalizar o valor do próprio texto.

    Vamos atualizar nosso exemplo anterior usando as propriedades de texto mencionadas anteriormente. Também lançaremos uma barra de progresso indeterminada na mistura.

    <div class="linear-container"> <igx-linear-bar type="default" [value]="100"></igx-linear-bar> <igx-linear-bar type="success" [value]="100" class="indeterminate" [indeterminate]="true" [striped]="true" ></igx-linear-bar> <igx-linear-bar type="error" [value]="100" [textAlign]="positionEnd" [text]="'Custom text'" ></igx-linear-bar> <igx-linear-bar type="info" [value]="100" [textVisibility]="false" [striped]="true" ></igx-linear-bar> <igx-linear-bar type="warning" [value]="100" [textTop]="true" ></igx-linear-bar> </div>

    E não se esqueça de importar o enumerador IgxTextAlign no seu componente se estiver usando a propriedade textAlign.

    import { ..., IgxTextAlign } from 'igniteui-angular'; // import { ..., IgxTextAlign } from '@infragistics/igniteui-angular'; for licensed package ... public positionCenter: IgxTextAlign = IgxTextAlign.CENTER; public positionEnd: IgxTextAlign = IgxTextAlign.END;

    Vamos dar uma olhada em como isso aconteceu:

    Observação

    Se o valor de entrada step não for definido, a atualização do progresso será de 1% do valor max​. Caso você queira que o progresso seja mais rápido, o valor step deve ser maior que (max. * 1%), respeitosamente para um progresso mais lento o step deve ser menor que a atualização de progresso padrão.

    Observação

    Se o valor step for definido como maior que o value de entrada, haverá apenas uma atualização, que obtém o valor passado para atualização de progresso.

    Progresso dinâmico

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

    <div class="linear-container">
  <igx-linear-bar [value]="currentValue" [max]="100"></igx-linear-bar>

  <div class="button-container">
    <button igxIconButton="flat" (click)="decrementProgress()">
      <igx-icon fontSet="material">remove</igx-icon>
    </button>
    <button igxIconButton="flat" (click)="incrementProgress()">
      <igx-icon fontSet="material">add</igx-icon>
    </button>
  </div>
</div>

    Crie os métodos que incrementam e decrementam o valor:

    public currentValue: number; public ngOnInit() { this.currentValue = 0; } public incrementProgress() { this.currentValue += 10; if (this.currentValue > 100) { this.currentValue = 100; } } public decrementProgress() { this.currentValue -= 10; if (this.currentValue < 0) { this.currentValue = 0; } }

    Depois de concluir as etapas acima, nossa barra de progresso deverá ficar assim:

    Estilização

    Para começar a estilizar a barra de progresso linear, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Seguindo a abordagem mais simples, criamos um novo tema que estende os progress-linear-theme parâmetros e substitui os $fill-color-default​ ​$text-color e.

    $custom-theme: progress-linear-theme( $fill-color-default: #ecaa53, $text-color: #ecaa53, );

    Incluindo temas

    O último passo é incluir o tema do componente em nosso aplicativo.

    @include css-vars($custom-theme);

    Demo

    API