Circular Progress

Ignite UI for Angular Circular Progress インジケーター コンポーネントは、変更でアプリケーションの進行状況を表す視覚的なインジケーターです。丸形インジケーターは状態変更で外観を更新します。

Angular Circular Progress の例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

Circular Progress Indicator コンポーネントを使用するには、まず IgxProgressBarModule を app.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxProgressBarModule } from 'igniteui-angular';

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

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

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

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

Note

igx-circular-bar は、各ステップに {currentValue: 65, previousValue: 64} のようなオブジェクトを出力する onProgressChanged イベントを発生します。

Note

step 値が定義されていない場合、デフォルトの進行のインクリメントの値は、max 値の 1% です。更新レートを変更するには、step 値を定義する必要があります。

不確定のプログレス

正確に決定していないプロセスをトラックしたい場合、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"
    >
    <div class="button-container">
        <button igxButton="icon" (click)="decrementProgress()">
            <igx-icon fontSet="material">remove</igx-icon>
        </button>
        <button igxButton="icon" (click)="incrementProgress()">
            <igx-icon fontSet="material">add</igx-icon>
        </button>
    </div>
</div>

値を増減するメソッドを追加します。

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: igx-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 igxButton="icon" (click)="removeProgress()">
          <igx-icon fontSet="material">remove</igx-icon>
      </button>
      <button igxButton="icon" (click)="addProgress()">
          <igx-icon fontSet="material">add</igx-icon>
      </button>
  </div>
</div>

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

スタイル設定

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

@import '~igniteui-angular/lib/core/styles/themes/index';

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

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

テーマを含む

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

$legacy-support が true に設定されている場合、コンポーネントのテーマを以下のように含めます。

 @include igx-progress-circular($custom-theme);
Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
     ::ng-deep {
        @include igx-progress-circular($custom-theme);
    }
}

$legacy-support が false (デフォルト) に設定されている場合、css 変数 を以下のように含めます。

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

コンポーネントが Emulated ViewEncapsulation を使用している場合においても、変数をオーバーライドするにはグローバル セレクターが必要なため、:host を使用する必要があります。

:host {
    @include igx-css-vars($custom-theme);
}

デモ


API