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
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
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 {}
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;
}
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>
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>
Entonces, si configuramos todo correctamente, deberías ver lo siguiente en tu navegador:
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>
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>
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;
Echemos un vistazo a cómo resultó esto:
Note
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.
Note
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
Puede cambiar dinámicamente el valor de la barra de progreso utilizando controles externos como botones. Para lograr esto, podemos vincular el valor a una propiedad de clase:
<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>
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;
}
}
Después de completar los pasos anteriores, nuestra barra de progreso debería verse así:
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';
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
);
Including Themes
El último paso es incluir el tema del componente en nuestra aplicación.
Si $legacy-support está configurado en true, incluya el tema del componente así:
@include progress-linear($custom-theme);
Note
Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep
:host {
::ng-deep {
@include progress-linear($custom-theme);
}
}
Si $legacy-support está configurado en false (predeterminado), incluya las variables CSS del componente así:
@include css-vars($custom-theme);
Note
Si el componente utiliza una ViewEncapsulation Emulated, aún debe usar:host porque necesita un selector global para anular las variables.
:host {
@include css-vars($custom-theme);
}
Demo
API
GitHub