Descripción general del componente de progreso circular Angular
El componente Ignite UI for Angular Circular Progress Indicator proporciona un indicador visual del proceso de una aplicación a medida que cambia. El indicador circular actualiza su apariencia a medida que cambia su estado.
Angular Circular Progress Example
Getting Started with Ignite UI for Angular Circular Progress
Para comenzar con el componente Ignite UI for Angular Circular 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 IgxCircularProgressBarComponent como una dependencia independiente o usar el token IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.
// home.component.ts
import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-circular-bar
[value]="100"
[animate]="true"
class="custom-size"
></igx-circular-bar>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES]
/* or imports: [IgxCircularProgressBarComponent] */
})
export class HomeComponent {}
Ahora que ha importado la Ignite UI for Angular, puede comenzar a usar el componente igx-circular-bar.
Using the Angular Circular Progress
Para comprender mejor cómo funciona todo, creemos un ejemplo simple, como el de la demostración:
<igx-circular-bar
[value]="100"
[animate]="true"
class="custom-size"
></igx-circular-bar>
Después de eso, deberíamos tener la muestra de demostración en su navegador.
Note
La barra circular igx emite el evento onProgressChanged que genera un objeto como este {currentValue: 65, previousValue: 64} en cada paso.
Note
El progreso predeterminado aumenta en un 1% del valor max por ciclo de actualización; esto sucede si el valor del step no está definido. Para cambiar la velocidad de actualización, se debe definir el valor step
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.
<igx-circular-bar
[animate]="false"
[indeterminate]="true"
[textVisibility]="false"
></igx-circular-bar>
Note
Puede ocultar el texto de la barra de progreso circular configurando la propiedad textVisibility en false.
El resultado final debería ser:
Dynamic Progress
Puede cambiar dinámicamente el valor del progreso utilizando controles externos como botones. Para lograr esto, podemos vincular el valor a una propiedad de clase:
<div class="sample-content">
<igx-circular-bar
[value]="currentValue"
[max]="100"
[animate]="true"
class="custom-size">
</igx-circular-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>
Agregue los métodos que incrementan y disminuyen el valor:
@Component({...})
export class HomeComponent {
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;
}
}
}
Añade algunos estilos:
.custom-size {
width: 100px;
height: 100px;
}
.sample-content {
width: 300px;
display: flex;
align-items: center;
margin-top: 30px;
}
Gradient Progress
Una forma de personalizar la barra de progreso es utilizar un degradado de color en lugar de un color sólido. Esto se puede hacer de dos maneras: utilizando la directiva IgxProgressBarGradientDirective o implementando un tema personalizado, aunque los temas personalizados admiten hasta dos paradas de color.
Si desea crear un degradado con solo dos paradas de color, puede hacerlo utilizando un tema personalizado. Cree una lista de colores y pásela al parámetro de tema $progress-circle-color:
$colors: #695cf9, #ef017c;
$custom-theme: progress-circular-theme(
$progress-circle-color: $colors
);
Puede obtener más información sobre cómo diseñar la barra de progreso circular en la Styling Section
Para proporcionar un degradado que tenga más de 2 paradas de color, tenemos que usar la directiva en una ng-template en nuestra igx-circular-bar así:
<div class="sample-content">
<igx-circular-bar
[value]="currentValue"
[max]="100"
[animate]="true"
class="custom-size">
<ng-template igxProgressBarGradient let-id>
<svg:linearGradient [id]="id" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#ff9a40"/>
<stop offset="50%" stop-color="#1eccd4"/>
<stop offset="100%" stop-color="#ff0079"/>
</svg:linearGradient>
</ng-template>
</igx-circular-bar>
<div class="button-container">
<button igxIconButton="flat" (click)="removeProgress()">
<igx-icon fontSet="material">remove</igx-icon>
</button>
<button igxIconButton="flat" (click)="addProgress()">
<igx-icon fontSet="material">add</igx-icon>
</button>
</div>
</div>
Después de reproducir los pasos anteriores, debería obtener este resultado:
Estilismo
Para comenzar a diseñar la barra de progreso circular, 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-circular-theme y acepta los parámetros $base-circle-color y $progress-circle-color.
$custom-theme: progress-circular-theme(
$base-circle-color: lightgray,
$progress-circle-color: rgb(32, 192, 17)
);
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-circular($custom-theme);
Note
Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep
:host {
::ng-deep {
@include progress-circular($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