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 イベントを発生します。

    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">
        </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) をサポートします)。

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

    $colors: #695cf9, #ef017c;
    
    $custom-theme: 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 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-supporttrue に設定されている場合、コンポーネントのテーマを以下のように含めます。

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

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

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

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

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

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

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

    デモ

    API