Angular Descripción general del componente de progreso lineal
El componente Ignite UI for Angular Indicador de barra de progreso lineal 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 selección 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 al Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar elIgxProgressBarModule archivo en el app.module.ts:
// 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 puedes importarlosIgxLinearProgressBarComponent como una dependencia independiente, o usar elIGX_LINEAR_PROGRESS_BAR_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.
// 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;
}
Ahora que tienes importado el módulo o las directivas de la barra de progreso Ignite UI for Angular, puedes empezar a usar eligx-linear-bar componente.
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
Puedes ajustar el tipo de tu barra usando eltype atributo. Hay cinco tipos de barras de progreso lineales -default,error,success,info, ywarning.
Striped Progress
Puedes hacer que la barra esté con rayas, usando lastriped propiedad y configurándola paratrue.
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 quieres rastrear un proceso que no está determinado con precisión, puedes establecer laindeterminate propiedad de entrada paratrue.
Animation Duration
LaanimationDuration propiedad de entrada 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
Puedes alinear el texto usando latextAlign propiedad. Los valores permitidos sonleft,center, yright.
Para ocultar el texto, usa latextVisibility propiedad y establece su valor afalse.
Configura latextTop propiedad paratrue mover el texto por encima de la barra.
Latext propiedad puede usarse para personalizar el valor del propio texto.
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 olvides importar elIgxTextAlign enumerador en tu componente si usas latextAlign propiedad.
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;
Echemos un vistazo a cómo resultó esto:
Note
Si elstep valor de entrada no está definido, la actualización de progreso es del 1% delmax valor. En caso de que quieras que el progreso sea más rápido, elstep valor debería ser mayor que (max* 1%); en caso de progresostep más lento, debería ser menor que la actualización predeterminada.
Note
Si elstep valor se define como mayor que lavalue entrada, solo hay una actualización, que recibe el valor que se pasa para la actualización de progreso.
Dynamic Progress
Puede cambiar dinámicamente el valor de la barra de progreso mediante 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 empezar a estilizar la barra de progreso lineal, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mezclados:
@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 sencillo, creamos un nuevo tema que extiende elprogress-linear-theme y anula los$fill-color-default parámetros de y$text-color.
$custom-theme: progress-linear-theme(
$fill-color-default: #ecaa53,
$text-color: #ecaa53,
);
Including Themes
El último paso es incluir el tema del componente en nuestra aplicación.
@include css-vars($custom-theme);
Demo
API
GitHub