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 属性を使用してバーのタイプを設定できます。リニア プログレス バーには、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';
// 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 をデフォルト進捗状況未満にする必要があります。
ダイナミック プログレス
ボタンなどの外部コントロールを使用してプログレス バーの値を動的に変更できます。これを実現するには、値をクラス プロパティにバインドします。
<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-support が true に設定されている場合、コンポーネントのテーマを以下のように含めます。
@include progress-linear($custom-theme);
Note
コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。
:host {
::ng-deep {
@include progress-linear($custom-theme);
}
}
$legacy-support が false (デフォルト) に設定されている場合、css 変数 を以下のように含めます。
@include css-vars($custom-theme);
Note
コンポーネントが Emulated ViewEncapsulation を使用している場合においても、変数をオーバーライドするにはグローバル セレクターが必要なため、:host を使用する必要があります。
:host {
@include css-vars($custom-theme);
}
デモ
API
GitHub