Angular Circular Progress (円形プログレス) コンポーネントの概要
Ignite UI for 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';
// 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 {}
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>
その後、ブラウザ上でデモサンプルを確認することができます。
Note
igx-circular-bar は、各ステップに {currentValue: 65, previousValue: 64} のようなオブジェクトを出力する onProgressChanged イベントを発生します。
不確定のプログレス
正確に決定していないプロセスをトラックしたい場合、indeterminate プロパティを true に設定できます。
<igx-circular-bar
[animate]="false"
[indeterminate]="true"
[textVisibility]="false"
></igx-circular-bar>
Note
円形のプログレスバーのテキストを非表示にするには、textVisibility プロパティを false に設定します。
結果は以下のようになります。
ダイナミック プログレス
ボタンなどの外部コントロールを使用して進行の値を動的に変更できます。これを実現するには、値をクラス プロパティにバインドします。
<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 {
width: 100px;
height: 100px;
}
.sample-content {
width: 300px;
display: flex;
align-items: center;
margin-top: 30px;
}
グラデーション プログレス
プログレス バーをカスタマイズする方法の 1 つとして、単色の代わりにカラー グラデーションを使用する方法があります。
これは、IgxProgressBarGradientDirective ディレクティブを使用する、もしくは、カスタムテーマを実装 することにより実行できます (カスタム テーマは 2 つまでの色経由点 (color stop) をサポートします)。
２つの色経由点のみでグラデーションを作成する場合、カスタム テーマを使用できます。色のリストを作成し、それを $progress-circle-color テーマ パラメーターに渡します。
$colors: #695cf9, #ef017c;
$custom-theme: progress-circular-theme(
$progress-circle-color: $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 および $progress-circle-color パラメーターを受け取る新しいテーマを作成する方法があります。
$custom-theme: progress-circular-theme(
$base-circle-color: lightgray,
$progress-circle-color: rgb(32, 192, 17)
);
テーマを含む
最後にコンポーネントのテーマをアプリケーションに含めます。
$legacy-support が true に設定されている場合、コンポーネントのテーマを以下のように含めます。
@include progress-circular($custom-theme);
Note
コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。
:host {
::ng-deep {
@include progress-circular($custom-theme);
}
}
$legacy-support が false (デフォルト) に設定されている場合、css 変数 を以下のように含めます。
@include css-vars($custom-theme);
Note
コンポーネントが Emulated ViewEncapsulation を使用している場合においても、変数をオーバーライドするにはグローバル セレクターが必要なため、:host を使用する必要があります。
:host {
@include css-vars($custom-theme);
}
デモ
API
GitHub