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 oIgxProgressBarModule arquivo no 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,16.0.0 você pode importarIgxCircularProgressBarComponent como uma dependência independente ou usar oIGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES token 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 ou diretivas da Barra de Progresso Ignite UI for Angular, pode começar a usar oigx-circular-bar componente.
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
A barra circular igx emiteonProgressChanged um evento que gera um objeto assim{currentValue: 65, previousValue: 64} em cada etapa.
Note
O progresso padrão incrementa em 1% domax valor por ciclo de atualização, isso acontece se ostep valor não estiver definido. Para alterar a taxa de atualização, ostep valor deve ser definido.'''
Indeterminate Progress
Se você quiser rastrear um processo que não está determinado com precisão, pode definir aindeterminate propriedade de entrada paratrue.
<igx-circular-bar [animate]="false" [indeterminate]="true" [textVisibility]="false"></igx-circular-bar>
Note
Você pode ocultar o texto da barra de progresso circular definindo atextVisibility propriedade parafalse.
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 {
--diameter: 100px;
}
.sample-content {
width: 300px;
display: flex;
align-items: center;
margin: 30px;
}
Gradient Progress
Uma forma 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 aIgxProgressBarGradientDirective diretiva ou implementando um tema personalizado, que suporta até dois paradas de cor.
Para criar um gradiente com apenas dois registros 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 naStyling Section
Para fornecer um gradiente que tenha mais de 2 paradas de cor, precisamos usar a diretiva em umng-template em nossoigx-circular-bar tipo 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>
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 oindex arquivo, onde todas as funções de tema e mixins de componentes estão ativos:
@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 osprogress-circular-theme e aceita os$base-circle-color parâmetros e$fill-color-default.
$custom-theme: progress-circular-theme(
$fill-color-default: rgb(32, 192, 17),
$diameter: 50px
);
O último passo é incluir o tema do componente em nosso aplicativo.
@include css-vars($custom-theme);
Demo
API
GitHub