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