Angular Linear Progress (リニア プログレス) コンポーネントの概要

    Ignite UI for Angular Linear Progress インジケーター コンポーネントは、変更でアプリケーションの進行状況を表す視覚的なインジケーターです。インジケーターは状態変更で外観を更新します。インジケーターがストライプまたは実線色でスタイル設定できます。

    Angular Linear Progress の例

    Ignite UI for Angular Linear Progress を使用した作業の開始

    Ignite UI for Angular Linear 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 以降、IgxLinearProgressBarComponent をスタンドアロンの依存関係としてインポートすることも、IGX_LINEAR_PROGRESS_BAR_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

    // home.component.ts
    
    import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular';
    // import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
    
    @Component({
        selector: 'app-home',
        template: '<igx-linear-bar [value]="progress"></igx-linear-bar>',
        styleUrls: ['home.component.scss'],
        standalone: true,
        imports: [IGX_LINEAR_PROGRESS_BAR_DIRECTIVES]
        /* or imports: [IgxLinearProgressBarComponent] */
    })
    export class HomeComponent {
        public progress = 50;
    }
    

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

    Angular Linear Progress の使用

    すべてがどのように動作することを確認できるために、デモのような簡単な例を作成します。

    <igx-linear-bar [value]="100"></igx-linear-bar>
    

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

    プログレス タイプ

    type 属性を使用してバーのタイプを設定できます。リニア プログレス バーには、defaulterrorsuccessinfo、および warning の 5 つのタイプがあります。

    ストライプ プログレス

    バーをストライプ スタイルにするには、striped プロパティを使用して true に設定します。

    プログレス バーの様々なタイプを作成する方法を例で紹介します。

    <div class="linear-container">
        <igx-linear-bar [value]="100" type="default"></igx-linear-bar>
        <igx-linear-bar [value]="100" type="success" [striped]="true"></igx-linear-bar>
        <igx-linear-bar [value]="100" type="error"></igx-linear-bar>
        <igx-linear-bar [value]="100" type="info" [striped]="true"></igx-linear-bar>
        <igx-linear-bar [value]="100" type="warning"></igx-linear-bar>
    </div>
    

    すべてが正しく構成されると、ブラウザーで以下が表示されます。

    不確定のプログレス

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

    アニメーション期間

    animationDuration 入力プロパティは、アニメーション サイクルにかかる時間を指定するために使用されます。

    次の例では、アニメーションの継続時間を 5 秒に設定しています。

    <igx-linear-bar [striped]="false" [value]="100" [animationDuration]="5000"></igx-linear-bar>
    

    Text プロパティ

    textAlign プロパティを使用してテキストを配置できます。指定できる値は leftcenterright です。

    テキストを非表示にするには、textVisibilityプロパティを使用して値を false に設定します。

    textTopプロパティを true に設定してバーの上にテキストを移動します。

    text プロパティを使用してテキスト自体の値をカスタマイズできます。

    前述のテキスト プロパティを使用して以前のサンプルを更新します。不確定のプログレス バーも追加します。

    <div class="linear-container">
        <igx-linear-bar
            type="default"
            [value]="100"
        ></igx-linear-bar>
        <igx-linear-bar
            type="success"
            [value]="100"
            class="indeterminate"
            [indeterminate]="true"
            [striped]="true"
        ></igx-linear-bar>
        <igx-linear-bar
            type="error"
            [value]="100"
            [textAlign]="positionEnd"
            [text]="'Custom text'"
        ></igx-linear-bar>
        <igx-linear-bar
            type="info"
            [value]="100"
            [textVisibility]="false"
            [striped]="true"
        ></igx-linear-bar>
        <igx-linear-bar
            type="warning"
            [value]="100"
            [textTop]="true"
        ></igx-linear-bar>
    </div>
    

    textAlign プロパティを使用している場合、コンポーネントの IgxTextAlign 列挙子をインポートする必要があります。

    import { ..., IgxTextAlign } from 'igniteui-angular';
    // import { ..., IgxTextAlign } from '@infragistics/igniteui-angular'; for licensed package
    ...
    
    public positionCenter: IgxTextAlign = IgxTextAlign.CENTER;
    public positionEnd: IgxTextAlign = IgxTextAlign.END;
    

    以下は結果です。

    Note

    step 入力値が定義されていない場合、更新は max 値の 1%。進行を速くしたい場合、step 値を (max * 1%) より大きい値にし、より遅い進行はstep をデフォルト進捗状況未満にする必要があります。

    Note

    stepvalue 入力より大きい値に定義した場合、進行状況の更新に渡す値を取得する更新は一つのみとなります。

    ダイナミック プログレス

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

    <div class="linear-container">
        <igx-linear-bar
            [value]="currentValue"
            [max]="100"
        ></igx-linear-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>
    

    値を増減するメソッドを作成します。

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

    上記の手順が完了した後、プログレス バーは以下のようになります。

    スタイル設定

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

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

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

    $custom-theme: progress-linear-theme(
        $track-color: #D3D3D3,
        $fill-color-default: #ECAA53,
        $text-color: #ECAA53
    );
    

    テーマを含む

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

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

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

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

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

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

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

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

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

    デモ

    API