Linear Progress

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

    Angular Linear Progress の例

    使用方法

    Linear Progress Bar Indicator コンポーネントを初期化するには、IgxProgressBarModuleapp.module.ts ファイルにインポートします。

    // app.module.ts
    
    ...
    import { IgxProgressBarModule } from 'igniteui-angular';
    
    @NgModule({
        ...
        imports: [..., IgxProgressBarModule],
        ...
    })
    export class AppModule {}
    

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

    <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 に設定できます。

    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';
    ...
    
    public positionCenter: IgxTextAlign = IgxTextAlign.CENTER;
    public positionEnd: IgxTextAlign = IgxTextAlign.END;
    

    以下は結果です。

    Note

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

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

    ダイナミック プログレス

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

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

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

    スタイル設定

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

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

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

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

    テーマを含む

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

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

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

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

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

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

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

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

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

    デモ

    API