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/progressbar';
// 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/progressbar';
// 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 属性を使用してバーのタイプを設定できます。リニア プログレス バーには、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 に設定できます。

アニメーション期間

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

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

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

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/progressbar';
// import { ..., IgxTextAlign } from '@infragistics/igniteui-angular'; for licensed package
...

public positionCenter: IgxTextAlign = IgxTextAlign.CENTER;
public positionEnd: IgxTextAlign = IgxTextAlign.END;

以下は結果です。

ダイナミック プログレス

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

<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 を拡張し、$fill-color-default と $text-color のパラメーターのみをオーバーライドするテーマを作成します。

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

テーマを含む

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

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

デモ

API

• LinearProgressBar
• IgxLinearProgressBarComponent スタイル
• IgxTextAlign