Angular Circular Progress (円形プログレス) コンポーネントの概要

Angular Circular Progress の例

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 については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxProgressBarModule をインポートします。

// app.module.ts

...
import { IgxProgressBarModule } from 'igniteui-angular/progressbar';
// 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/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 {}

Ignite UI for Angular Progress Bar モジュールまたはディレクティブをインポートしたので、igx-circular-bar コンポーネントの使用を開始できます。

Angular Circular Progress の使用

すべての動作をよりよく理解するため、デモのような簡単な例を作成します。

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

その後、ブラウザ上でデモサンプルを確認することができます。

不確定のプログレス

正確に決定していないプロセスをトラックしたい場合、indeterminate プロパティを true に設定できます。

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

結果は以下のようになります。

ダイナミック プログレス

ボタンなどの外部コントロールを使用して進行の値を動的に変更できます。これを実現するには、値をクラス プロパティにバインドします。

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

グラデーション プログレス

プログレス バーをカスタマイズする方法の 1 つとして、単色の代わりにカラー グラデーションを使用する方法があります。 これは、IgxProgressBarGradientDirective ディレクティブを使用する、もしくは、カスタム テーマを実装することにより実行できます (カスタム テーマは 2 つまでの色経由点 (color stop) をサポートします)。

カスタム テーマを使用して 2 つの色経由点のみを含むグラデーションを作成するには、色のリストを作成し、それを $fill-color-default テーマ パラメーターに渡す必要があります。

$colors: #695cf9, #ef017c;

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

円形のプログレス バーのスタイル設定については、スタイル設定セクション を参照してください。

3つ以上の色経由点を持つグラデーションを提供するには、igx-circular-bar の ng-template でディレクティブを使用する必要があります。

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

上記の手順を再現した後、以下のようになります。

スタイル設定

円形のプログレスバーのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

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

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法として、progress-circular-theme を拡張し、$base-circle-color および $fill-color-default パラメーターを受け取る新しいテーマを作成する方法があります。

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

最後にコンポーネントのテーマをアプリケーションに含めます。

:host {
  @include tokens($custom-theme);
}

デモ

API

• CircularProgressBar
• IgxCircularProgressBarComponent スタイル