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 Linear Progress Example

    Getting Started with Ignite UI for Angular Linear Progress

    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.

    Using the Angular Linear Progress

    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.

    Progress Types

    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.

    Striped Progress

    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:

    Indeterminate Progress

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

    Animation Duration

    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>

    Text Properties

    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:

    Note

    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.

    Note

    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.

    Dynamic Progress

    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 o progress-linear-theme e aceita os parâmetros $track-color, $fill-color-default e $text-color.

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

    Including Themes

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

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

    Demo

    API