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.
Ejemplo de progreso lineal Angular
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Introducción a Ignite UI for Angular
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
.
Usando el progreso Angular
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.
Tipos de progreso
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
.
Progreso rayado
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:
Progreso indeterminado
Si desea realizar un seguimiento de un proceso que no está determinado con precisión, puede establecer la propiedad de entrada indeterminate
en true
.
Duración de la animación
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
Propiedades del texto
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:
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.
Progreso dinámico
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:
Estilo
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
Incluyendo temas
El último paso es incluir el tema del componente en nuestra aplicación.
@include css-vars($custom-theme);
scss