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 Ejemplo de Progreso Circular

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxCircularProgressBarComponent } from 'igniteui-angular';

@Component({
    selector: 'app-circular-progressbar',
    styleUrls: ['./circular-progressbar.component.scss'],
    templateUrl: './circular-progressbar.component.html',
    imports: [IgxCircularProgressBarComponent]
})
export class CircularProgressbarComponent { }
tsコピー

<igx-circular-bar
[value]="100"
[animate]="true"
class="custom-size"
></igx-circular-bar>
htmlコピー

.custom-size {
    margin-top: 20px;
    width: 50px;
    height: 50px;
}
scssコピー

Edit in: CodesandboxStackBlitz

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Primeros pasos con 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
cmd

Para obtener una introducción completa al 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 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 {}
typescript

Ahora que ha importado el módulo o las directivas de la barra de progreso Ignite UI for Angular, puede comenzar a usar el igx-circular-bar componente.

Uso de la Angular Progreso Circular

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>
html

Después de eso, deberíamos tener la muestra de demostración en su navegador.

La barra circular igx emite el evento onProgressChanged que genera un objeto como este {currentValue: 65, previousValue: 64} en cada paso.

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​

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.

<igx-circular-bar [animate]="false" [indeterminate]="true" [textVisibility]="false"></igx-circular-bar>
html

Puede ocultar el texto de la barra de progreso circular configurando la propiedad textVisibility en false.

El resultado final debería ser:

EXAMPLE

TS

HTML

import { Component } from '@angular/core';
import { IgxCircularProgressBarComponent } from 'igniteui-angular';

@Component({
    selector: 'app-circular-indeterminate-progressbar',
    styleUrls: ['./circular-indeterminate-progressbar.component.scss'],
    templateUrl: './circular-indeterminate-progressbar.component.html',
    imports: [IgxCircularProgressBarComponent]
})
export class CircularIndeterminateProgressbarComponent { }
tsコピー

<igx-circular-bar
[animate]="false"
[indeterminate]="true"
[textVisibility]="false"
></igx-circular-bar>
htmlコピー

Edit in: CodesandboxStackBlitz

Progreso dinámico

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>
html

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;
        }
    }
}
typescript

Añade algunos estilos:

.custom-size {
  width: 100px;
  height: 100px;
}

.sample-content {
  width: 300px;
  display: flex;
  align-items: center;
  margin-top: 30px;
}
scss

Progreso del gradiente

Una forma de personalizar la barra de progreso es usar un degradado de color en lugar de un color sólido. Esto se puede hacer de una de dos maneras: mediante el uso de la directiva o mediante la IgxProgressBarGradientDirective implementación de un tema personalizado, que admite hasta dos paradas de color.

Para crear un degradado con solo dos paradas de color usando un tema personalizado, debe crear una lista de colores y pasarla al parámetro theme $fill-color-default:

$colors: #695cf9, #ef017c;

$custom-theme: progress-circular-theme(
  $fill-color-default: $colors,
);
scss

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>
html

Después de reproducir los pasos anteriores, debería obtener este resultado:

EXAMPLE

TS

HTML

SCSS

import { Component, OnInit } from '@angular/core';
import { IgxCircularProgressBarComponent, IgxProgressBarGradientDirective, IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular';

@Component({
    selector: 'app-circular-dynamic-sample',
    styleUrls: ['./circular-dynamic-sample.component.scss'],
    templateUrl: './circular-dynamic-sample.component.html',
    imports: [IgxCircularProgressBarComponent, IgxProgressBarGradientDirective, IgxIconButtonDirective, IgxIconComponent]
})
export class CircularDynamicSampleComponent implements OnInit {

    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;
        }
    }
}
tsコピー

<div class="wrapper">
    <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)="decrementProgress()">
                <igx-icon family="material">remove</igx-icon>
            </button>
            <button igxIconButton="flat" (click)="incrementProgress()">
                <igx-icon family="material">add</igx-icon>
            </button>
        </div>
    </div>
</div>

htmlコピー

.custom-size {
    width: 100px;
    height: 100px;
}

.sample-content {
    width: 300px;
    display: flex;
    align-items: center;
    margin-top: 30px;
}
scssコピー

Edit in: CodesandboxStackBlitz

Estilo

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';
scss

Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el progress-circular-theme y acepta los parámetros y . $base-circle-color​ ​$fill-color-default​

$custom-theme: progress-circular-theme(
  $base-circle-color: lightgray,
  $fill-color-default: rgb(32, 192, 17),
);
scss

El último paso es incluir el tema del componente en nuestra aplicación.

@include css-vars($custom-theme);
scss

Manifestación

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxCircularProgressBarComponent } from 'igniteui-angular';

@Component({
    selector: 'app-circular-styling-sample',
    styleUrls: ['./circular-styling-sample.component.scss'],
    templateUrl: './circular-styling-sample.component.html',
    imports: [IgxCircularProgressBarComponent]
})
export class CircularStylingSampleComponent { }
tsコピー

<igx-circular-bar
[animate]="false"
[indeterminate]="true"
></igx-circular-bar>
htmlコピー

@use "igniteui-angular/theming" as *;

$custom-theme: progress-circular-theme(
  $base-circle-color: lightgray,
  $fill-color-default: rgb(32, 192, 17),
);

@include css-vars($custom-theme);
 scssコピー

Edit in: CodesandboxStackBlitz

API

• Componente IgxCircularProgressBar
• IgxCircularProgressBarEstilos de componentes