Visão geral do componente Progresso circular Angular
O componente Ignite UI for Angular Circular Progress Indicator fornece um indicador visual do processo de um aplicativo conforme ele muda. O indicador circular atualiza sua aparência conforme seu estado muda.
Angular Circular Progress Example
Getting Started with Ignite UI for Angular Circular Progress
Para começar a usar o componente Ignite UI for Angular Circular Progress, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:
ng add igniteui-angular
Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.
O próximo passo é importar o IgxProgressBarModule no arquivo 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 {}
Como alternativa, a partir da 16.0.0, você pode importar o IgxCircularProgressBarComponent como uma dependência autônoma ou usar o token IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.
// 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 {}
Agora que você importou o módulo Ignite UI for Angular Progress Bar ou as diretivas, você pode começar a usar o componente igx-circular-bar.
Using the Angular Circular Progress
Para entender melhor como tudo funciona, vamos criar um exemplo simples, como o da demonstração:
<igx-circular-bar [value]="100" [animate]="true" class="custom-size"></igx-circular-bar>
Depois disso, devemos ter o exemplo de demonstração no seu navegador.
Note
O igx-circular-bar emite o evento onProgressChanged que gera um objeto como este {currentValue: 65, previousValue: 64} em cada etapa.
Note
O progresso padrão incrementa em 1% do valor max por ciclo de atualização, isso acontece se o valor step não for definido. Para alterar a taxa de atualização, o valor step deve ser definido.```
Indeterminate Progress
Se você quiser rastrear um processo que não foi determinado com precisão, você pode definir a propriedade de entrada indeterminate como true.
<igx-circular-bar [animate]="false" [indeterminate]="true" [textVisibility]="false"></igx-circular-bar>
Note
Você pode ocultar o texto da barra de progresso circular definindo a propriedade textVisibility como false.
O resultado final deve ser:
Dynamic Progress
Você pode alterar dinamicamente o valor do progresso usando controles externos como botões. Para conseguir isso, podemos vincular o valor a uma propriedade de classe:
<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>
Adicione os métodos que incrementam e decrementam o 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;
}
}
}
Adicione alguns estilos:
.custom-size {
width: 100px;
height: 100px;
}
.sample-content {
width: 300px;
display: flex;
align-items: center;
margin-top: 30px;
}
Gradient Progress
Uma maneira de personalizar a barra de progresso é usando um gradiente de cor em vez de uma cor sólida. Isso pode ser feito de duas maneiras - usando a IgxProgressBarGradientDirective diretiva ou implementando um tema personalizado, que suporta até duas paradas de cores.
Para criar um gradiente com apenas duas paradas de cor usando um tema personalizado, você precisa criar uma lista de cores e passá-la para o $fill-color-default parâmetro do tema:
$colors: #695cf9, #ef017c;
$custom-theme: progress-circular-theme(
$fill-color-default: $colors,
);
Você pode aprender mais sobre como estilizar a barra de progresso circular na Styling Section
Para fornecer um gradiente com mais de 2 pontos de cor, temos que usar a diretiva em um ng-template em nossa igx-circular-bar assim:
<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>
Após reproduzir os passos acima, você deverá obter este resultado:
Estilização
Para começar a estilizar a barra de progresso circular, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Seguindo a abordagem mais simples, criamos um novo tema que estende os progress-circular-theme parâmetros e aceita os $base-circle-color e . $fill-color-default
$custom-theme: progress-circular-theme(
$base-circle-color: lightgray,
$fill-color-default: rgb(32, 192, 17),
);
O último passo é incluir o tema do componente em nosso aplicativo.
@include css-vars($custom-theme);
Demo
API
GitHub