Linear Progress

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

Angular Linear Progress の例

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

使用方法

Linear Progress Bar Indicator コンポーネントを初期化するには、IgxProgressBarModule を app.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 属性を使用してバーのタイプを設定できます。リニア プログレス バーには、default、error、success、info、および 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 プロパティを使用してテキストを配置できます。指定できる値は left、center、right です。

テキストを非表示にするには、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 をデフォルト進捗状況未満にする必要があります。

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

ダイナミック プログレス

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

<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-support が true に設定されている場合、コンポーネントのテーマを以下のように含めます。

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

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

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

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

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

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

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

デモ


API