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.

    The next step is to import the IgxProgressBarModule in the app.module.ts file:

    // app.module.ts

...
import { IgxProgressBarModule } from 'igniteui-angular/progressbar';
// import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxProgressBarModule],
    ...
})
export class AppModule {}

    Alternativamente,16.0.0 você pode importarIgxLinearProgressBarComponent como uma dependência independente ou usar oIGX_LINEAR_PROGRESS_BAR_DIRECTIVES token 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/progressbar';
// 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;
}

    Now that you have the Ignite UI for Angular Progress Bar module or directives imported, you can start using the igx-linear-bar component.

    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

    You can set the type of your bar, using the type attribute. There are five types of linear progress bars - default, error, success, info, and warning.

    Striped Progress

    You can make the bar striped, using the striped property and by setting it to 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

    If you want to track a process that is not determined precisely, you can set the indeterminate input property to true.

    Animation Duration

    The animationDuration input property is used to specify how long the animation cycle should take.

    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

    You can align the text, using the textAlign property. Permitted values are left, center, and right.

    To hide the text, use the textVisibility property and set its value to false.

    Set the textTop property to true to move the text above the bar.

    The text property can be used to customize the value of the text itself.

    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>

    And do not forget to import the IgxTextAlign enumerator in your component if you're using the textAlign property.

    import { ..., IgxTextAlign } from 'igniteui-angular/progressbar';
// 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

    If the step input value is not defined, the progress update is 1% of the max value. In case you want the progress to be faster, the step value should be greater than (max * 1%), respectfully for slower progress the step should be less than the default progress update.

    Note

    If the step value is defined greater than the value input, there is only one update, which gets the value that is passed for progress update.

    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

    To get started with styling the linear progress bar, we need to import the index file, where all the theme functions and component mixins live:

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

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

    Following the simplest approach, we create a new theme that extends the progress-linear-theme and override the $fill-color-default and $text-color parameters.

    $custom-theme: progress-linear-theme(
  $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