Angular 원형 진행 구성 요소 개요

Ignite UI for Angular Circular Progress Indicator 구성 요소는 애플리케이션 프로세스가 변경될 때 시각적 표시기를 제공합니다. 원형 표시기는 상태가 변경될 때 모양이 업데이트됩니다.

Angular Circular Progress Example

Getting Started with Ignite UI for Angular Circular Progress

Ignite UI for Angular Circular Progress 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

The next step is to import the IgxProgressBarModule in the app.module.ts file:

// app.module.ts

...
import { IgxProgressBarModule } from 'igniteui-angular';
// import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxProgressBarModule],
    ...
})
export class AppModule {}

또는16.0.0 독립 실행형 의존성으로 가져오IgxCircularProgressBarComponent 거나, 토큰을IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.

// 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 {}

Now that you have the Ignite UI for Angular Progress Bar module or directives imported, you can start using the igx-circular-bar component.

Using the Angular Circular Progress

모든 것이 어떻게 작동하는지 더 잘 이해하기 위해 데모에 있는 것과 같은 간단한 예를 만들어 보겠습니다.

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

그런 다음 브라우저에 데모 샘플이 있어야 합니다.

Note

The igx-circular-bar emits onProgressChanged event that outputs an object like this {currentValue: 65, previousValue: 64} on each step.

Note

The default progress increments by 1% of the max value per update cycle, this happens if the step value is not defined. To change the update rate, the step value should be defined.```

Indeterminate Progress

If you want to track a process that is not determined precisely, you can set the indeterminate input property to true.

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

Note

You can hide the text of the circular progress bar by setting the textVisibility property to false.

최종 결과는 다음과 같습니다.

Dynamic Progress

버튼과 같은 외부 컨트롤을 사용하여 진행률 값을 동적으로 변경할 수 있습니다. 이를 달성하기 위해 값을 클래스 속성에 바인딩할 수 있습니다.

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

값을 증가 및 감소시키는 메소드를 추가하십시오.

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

몇 가지 스타일을 추가하세요.

.custom-size {
  --diameter: 100px;
}

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

Gradient Progress

One way to customize the progress bar is by using a color gradient instead of a solid color. This can be done in one of two ways - by using the IgxProgressBarGradientDirective directive or by implementing a custom theme, which supports up to two color stops.

To create a gradient with just two color stops using a custom theme, you need to create a list of colors and pass it to the $fill-color-default theme parameter:

$colors: #695cf9, #ef017c;

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

You can learn more about styling the circular progress bar in the Styling Section

To provide a gradient that has more than 2 color stops, we have to use the directive on an ng-template in our igx-circular-bar like that:

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

위 단계를 재현한 후 결과는 다음과 같습니다.

스타일링

To get started with styling the circular progress bar, we need to import the index file, where all the theme functions and component mixins live:

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

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Following the simplest approach, we create a new theme that extends the progress-circular-theme and accepts the $base-circle-color and the $fill-color-default parameters.

$custom-theme: progress-circular-theme(
  $fill-color-default: rgb(32, 192, 17),
  $diameter: 50px
);

마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.

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

Demo

API

• IgxCircularProgressBarComponent
• IgxCircularProgressBar구성 요소 스타일