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.
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 {}
Alternatively, as of 16.0.0 you can import the IgxLinearProgressBarComponent as a standalone dependency, or use the IGX_LINEAR_PROGRESS_BAR_DIRECTIVES token to import the component and all of its supporting components and directives.
// 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 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
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.
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
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.
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
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.
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>
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;
Echemos un vistazo a cómo resultó esto:
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
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
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
El último paso es incluir el tema del componente en nuestra aplicación.
@include css-vars($custom-theme);
Demo
API
GitHub