Circular Progress

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

    Angular Circular Progress の例

    使用方法

    Circular Progress Indicator コンポーネントを使用するには、まず IgxProgressBarModuleapp.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) をサポートします)。

    2つの色経由点のみでグラデーションを作成する場合、カスタム テーマを使用できます。色のリストを作成し、それを $progress-circle-color テーマ パラメーターに渡します。

    $colors: #695cf9, #ef017c;
    
    $custom-theme: igx-progress-circular-theme(
        $progress-circle-color: $colors
    
    );
    

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

    3つ以上の色経由点を持つグラデーションを提供するには、igx-circular-barng-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-supporttrue に設定されている場合、コンポーネントのテーマを以下のように含めます。

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

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

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

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

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

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

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

    デモ

    API