Descripción general del componente de progreso circular Angular
El componente Ignite UI for Angular Indicador de progreso circular 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 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 importarlosIgxCircularProgressBarComponent como una dependencia independiente, o usar elIGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.
// home.component.ts
import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular/progressbar';
// 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 tienes importado el módulo o las directivas de la barra de progreso Ignite UI for Angular, puedes empezar a usar eligx-circular-bar componente.
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 emiteonProgressChanged un evento que produce un objeto así{currentValue: 65, previousValue: 64} en cada paso.
Note
El progreso por defecto incrementa un 1% delmax valor por ciclo de actualización, esto ocurre si elstep valor no está definido. Para cambiar la tasa de actualización, se debe definir elstep valor.'''
Indeterminate Progress
Si quieres rastrear un proceso que no está determinado con precisión, puedes establecer laindeterminate propiedad de entrada paratrue.
<igx-circular-bar [animate]="false" [indeterminate]="true" [textVisibility]="false"></igx-circular-bar>
Note
Puedes ocultar el texto de la barra de progreso circular configurando latextVisibility propiedad parafalse.
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 {
--diameter: 100px;
}
.sample-content {
width: 300px;
display: flex;
align-items: center;
margin: 30px;
}
Gradient Progress
Una forma de personalizar la barra de progreso es usando un degradado de color en lugar de un color sólido. Esto puede hacerse de dos maneras: usando laIgxProgressBarGradientDirective directiva o implementando un tema personalizado, que soporta hasta dos registros de color.
Para crear un degradado con solo dos registros de color usando un tema personalizado, necesitas crear una lista de colores y pasarla al$fill-color-default parámetro de tema:
$colors: #695cf9, #ef017c;
$custom-theme: progress-circular-theme(
$fill-color-default: $colors,
);
Puedes aprender más sobre cómo estilizar la barra de progreso circular en laStyling Section
Para proporcionar un degradado que tenga más de 2 topes de color, tenemos que usar la directiva en unng-template en nuestroigx-circular-bar como que:
<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 empezar a estilizar la barra de progreso circular, 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 losprogress-circular-theme y acepta los$base-circle-color parámetros y$fill-color-default.
$custom-theme: progress-circular-theme(
$fill-color-default: rgb(32, 192, 17),
$diameter: 50px
);
El último paso es incluir el tema del componente en nuestra aplicación.
@include css-vars($custom-theme);
Demo
API
GitHub