Components List

Angular Linear Progress (リニアプログレス) コンポーネントの概要

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

Angular Linear Progress の例

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxProgressBarModule } from "igniteui-angular";
import { LinearProgressbarComponent } from "./linear-progressbar/linear-progressbar.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	LinearProgressbarComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxProgressBarModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-linear-progressbar',
  styleUrls: ['./linear-progressbar.component.scss'],
  templateUrl: './linear-progressbar.component.html'
})
export class LinearProgressbarComponent { }
ts

<igx-linear-bar [value]="100"></igx-linear-bar>
html

igx-linear-bar {
    margin-top: 20px;
}
scss

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

Ignite UI for Angular Linear Progress を使用した作業の開始

Ignite UI for Angular Linear Progress コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular
cmd

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 {}
typescript

あるいは、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;
}
typescript

Ignite UI for Angular Progress Bar モジュールまたはディレクティブをインポートしたので、igx-linear-bar コンポーネントの使用を開始できます。

Angular Linear Progress の使用

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

<igx-linear-bar [value]="100"></igx-linear-bar>
html

その後、ブラウザ上でデモサンプルを確認することができます。

プログレスタイプ

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>
html

すべてが正しく構成されると、ブラウザーで以下が表示されます。

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxProgressBarModule } from "igniteui-angular";
import { LinearProgressbarSample1Component } from "./linear-progressbar-sample-1/linear-progressbar-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	LinearProgressbarSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxProgressBarModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-linear-progressbar-sample-1',
  styleUrls: ['./linear-progressbar-sample-1.component.scss'],
  templateUrl: './linear-progressbar-sample-1.component.html'
})
export class LinearProgressbarSample1Component {}
ts

<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>

html

.linear-container {
    margin-top: 20px;
}
scss

不確定のプログレス

正確に決定していないプロセスをトラックしたい場合、indeterminate プロパティを true に設定できます。

アニメーション期間

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

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

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

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>
html

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;
typescript

以下は結果です。

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxProgressBarModule } from "igniteui-angular";
import { LinearProgressbarSample2Component } from "./linear-progressbar-sample-2/linear-progressbar-sample-2.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	LinearProgressbarSample2Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxProgressBarModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component } from '@angular/core';
import { IgxTextAlign } from 'igniteui-angular';

@Component({
  selector: 'app-linear-progressbar-sample-2',
  styleUrls: ['./linear-progressbar-sample-2.component.scss'],
  templateUrl: './linear-progressbar-sample-2.component.html'
})
export class LinearProgressbarSample2Component {

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

<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>
html

.linear-container {
    margin-top: 20px;
}

.indeterminate {
    margin-bottom: 20px;
}
scss

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 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>
html

値を増減するメソッドを作成します。

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

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

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxButtonModule,
	IgxIconModule,
	IgxProgressBarModule,
	IgxRippleModule
 } from "igniteui-angular";
import { LinearDynamicSampleComponent } from "./linear-dynamic-sample/linear-dynamic-sample.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	LinearDynamicSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxButtonModule,
	IgxIconModule,
	IgxProgressBarModule,
	IgxRippleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-linear-dynamic-sample',
    styleUrls: ['./linear-dynamic-sample.component.scss'],
    templateUrl: './linear-dynamic-sample.component.html'
})
export class LinearDynamicSampleComponent implements OnInit{

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

<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 family="material">remove</igx-icon>
        </button>
        <button igxButton="icon" (click)="incrementProgress()">
            <igx-icon family="material">add</igx-icon>
        </button>
    </div>
 </div>
html

.linear-container {
    margin-top: 20px;
}
scss

スタイル設定

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

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

最も簡単な方法として、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,
);
scss

テーマを含む

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

@include css-vars($custom-theme);
scss

デモ

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxProgressBarModule } from "igniteui-angular";
import { LinearProgressbarStylingComponent } from ".//linear-progressbar-styling-sample/linear-progressbar-styling-sample.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	LinearProgressbarStylingComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxProgressBarModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-linear-progressbar-styling',
    styleUrls: ['./linear-progressbar-styling-sample.component.scss'],
    templateUrl: './linear-progressbar-styling-sample.component.html'
})
export class LinearProgressbarStylingComponent { }
ts

<igx-linear-bar [value]="100"></igx-linear-bar>
html

@use '../../variables' as *;

igx-linear-bar {
    margin-top: 20px;
}

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

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

Angular Linear Progress (リニアプログレス) コンポーネントの概要

Angular Linear Progress の例

Ignite UI for Angular Linear Progress を使用した作業の開始

Angular Linear Progress の使用

プログレスタイプ

ストライププログレス

不確定のプログレス

アニメーション期間

Text プロパティ

ダイナミックプログレス

スタイル設定

テーマを含む

デモ

API

テーマ設定

Angular Linear Progress (リニア プログレス) コンポーネントの概要

Angular Linear Progress の例

Ignite UI for Angular Linear Progress を使用した作業の開始

Angular Linear Progress の使用

プログレス タイプ

ストライプ プログレス

不確定のプログレス

アニメーション期間

Text プロパティ

ダイナミック プログレス

スタイル設定

テーマを含む

デモ

API

テーマ設定

Angular Linear Progress (リニアプログレス) コンポーネントの概要

プログレスタイプ

ストライププログレス

ダイナミックプログレス