Descripción general del componente de progreso lineal Angular

    El componente Ignite UI for Angular Linear Progress Bar Indicator proporciona un indicador visual del proceso de una aplicación a medida que cambia. El indicador actualiza su apariencia a medida que cambia su estado. El indicador se puede diseñar con una variedad de colores, en rayas o sólidos.

    Angular Linear Progress Example

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    Getting Started with Ignite UI for Angular Linear Progress

    Para comenzar con el componente Ignite UI for Angular Linear Progress, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular
    cmd

    Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxProgressBarModule en el archivo 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 {}
    typescript

    Alternativamente, a partir de 16.0.0, puede importar IgxLinearProgressBarComponent como una dependencia independiente o usar el token IGX_LINEAR_PROGRESS_BAR_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

    // 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;
    }
    typescript

    Ahora que ha importado la Ignite UI for Angular, puede comenzar a usar el componente igx-linear-bar.

    Using the Angular Linear Progress

    Para comprender mejor cómo funciona todo, creemos un ejemplo simple, como el de la demostración:

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

    Después de eso, debería ver la muestra de demostración en su navegador.

    Progress Types

    Puede establecer el tipo de su barra utilizando el atributo type. Hay cinco tipos de barras de progreso lineal: default, error, success, info y warning.

    Striped Progress

    Puedes hacer que la barra tenga rayas, usando la propiedad striped y configurándola en true.

    Veamos cómo podemos crear diferentes tipos de barras de progreso que pueden tener rayas o no.

    <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>
    html

    Entonces, si configuramos todo correctamente, deberías ver lo siguiente en tu navegador:

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Indeterminate Progress

    Si desea realizar un seguimiento de un proceso que no está determinado con precisión, puede establecer la propiedad de entrada indeterminate en true.

    Animation Duration

    La propiedad de entrada animationDuration se utiliza para especificar cuánto tiempo debe durar el ciclo de animación.

    El siguiente ejemplo especifica la duración de la animación establecida en 5 segundos.

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

    Text Properties

    Puede alinear el texto utilizando la propiedad textAlign. Los valores permitidos son left, center y right.

    Para ocultar el texto, use la propiedad textVisibility y establezca su valor en false.

    Establezca la propiedad textTop en true para mover el texto encima de la barra.

    La propiedad text se puede utilizar para personalizar el valor del texto mismo.

    Actualicemos nuestro ejemplo anterior utilizando las propiedades de texto antes mencionadas. También incluiremos una barra de progreso indeterminada en la mezcla.

    <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>
    html

    Y no olvide importar el enumerador IgxTextAlign en su componente si está utilizando la propiedad 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;
    typescript

    Echemos un vistazo a cómo resultó esto:

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Si el valor de entrada step no está definido, la actualización del progreso es el 1% del valor max. En caso de que desee que el progreso sea más rápido, el valor del step debe ser mayor que (max * 1%); respetuosamente, para un progreso más lento, el step debe ser menor que la actualización de progreso predeterminada.

    Si el valor step se define mayor que el value de entrada, solo hay una actualización, que obtiene el valor que se pasa para la actualización del progreso.

    Dynamic Progress

    You can dynamically change the value of the progress bar by using external controls like buttons. To achieve this, we can bind the value to a class property:

    <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>
    html

    Cree los métodos que incrementan y disminuyen el 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;
        }
    }
    typescript

    After completing the steps above, our progress bar should look like this:

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Estilismo

    Para comenzar a diseñar la barra de progreso lineal, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

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

    Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el progress-linear-theme y acepta los parámetros $track-color, $fill-color-default y $text-color.

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

    Including Themes

    El último paso es incluir el tema del componente en nuestra aplicación.

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

    Demo

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    App Builder | CTA Banner

    API