クラス IgxLinearProgressBarComponent

階層

コンストラクタ

constructor

プロパティ

id

id: string = `igx-linear-bar-${NEXT_LINEAR_ID++}`

id 属性の値を設定する @Input プロパティ。提供されていない場合、自動的に生成されます。

<igx-linear-bar [id]="'igx-linear-bar-55'" [striped]="true" [max]="200" [value]="50"></igx-linear-bar>

onProgressChanged

onProgressChanged: EventEmitter<IChangeProgressEventArgs> = new EventEmitter<IChangeProgressEventArgs>()

進行状況が変更された後にトリガーするイベント。

public progressChange(event) {
   alert("Progress made!");
}
//...
<igx-linear-bar (onProgressChanged)="progressChange($event)" type="success">

striped

striped: boolean = false

IgxLinearProgressBarComponent をストライプ スタイルに設定します。デフォルトの設定は false です。

<igx-linear-bar [striped]="true" [max]="200" [value]="50"></igx-linear-bar>

text

text: string

定義された位置に基づいて表示されるカスタム テキストを設定します。

<igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></igx-linear-bar>

textAlign

textAlign: IgxTextAlign = IgxTextAlign.START

テキスト配置を定義する位置を設定します。 オプションは IgxTextAlign.START (デフォルト値)、IgxTextAlign.CENTER、および IgxTextAlign.END です。

public positionCenter: IgxTextAlign;
public ngOnInit() {
   this.positionCenter = IgxTextAlign.CENTER;
}
//...
<igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></igx-linear-bar>

textTop

textTop: boolean = false

テキストをイナズマ線の上に配置するかどうかを定義する位置を設定します。デフォルトで false に設定されます。

<igx-linear-bar type="danger" [textTop]="true"></igx-linear-bar>

textVisibility

textVisibility: boolean = true

テキストを表示するかどうかを設定します。デフォルトで true に設定されます。

<igx-linear-bar type="default" [textVisibility]="false"></igx-linear-bar>

type

type: string = "default"

IgxLinearProgressBarComponent のタイプを設定します。オプションは defaultsuccessinfowarning、または danger です。

<igx-linear-bar [striped]="false" [max]="100" [value]="0" type="danger"></igx-linear-bar>

アクセサー

animate

  • get animate(): boolean
  • set animate(animate: boolean): void
  • IgxLinearProgressBarComponent にアニメーションがあるかどうかを true/false として返します。

    @ViewChild("MyProgressBar")
    public progressBar: IgxLinearProgressBarComponent;
    public animationStatus(event) {
       let animationStatus = this.progressBar.animate;
       alert(animationStatus);
    }

    返却 boolean

  • IgxLinearProgressBarComponent に進行状況でアニメーションを再生します。デフォルトで true に設定されます。

    <igx-linear-bar [animate]="false" [striped]="true" [max]="200" [value]="50"></igx-linear-bar>

    パラメーター

    • animate: boolean

    返却 void

max

  • get max(): number
  • set max(maxNum: number): void
  • IgxLinearProgressBarComponent の最大進行状況値を返します。

    @ViewChild("MyProgressBar")
    public progressBar: IgxLinearProgressBarComponent;
    public maxValue(event) {
       let max = this.progressBar.max;
       alert(max);
    }

    返却 number

  • 渡すことができる最大値を設定します。デフォルトで 100 に設定されます。

    <igx-linear-bar [striped]="false" [max]="200" [value]="0"></igx-linear-bar>

    パラメーター

    • maxNum: number

    返却 void

step

  • get step(): number
  • set step(val: number): void
  • IgxLinearProgressBarComponent の進行状況インジケーターを更新する値を返します。

    @ViewChild("MyProgressBar")
    public progressBar: IgxLinearProgressBarComponent;
    public stepValue(event) {
       let step = this.progressBar.step;
       alert(step);
    }

    返却 number

  • 進行状況インジケーターの更新量の値を設定します。デフォルト値は最大値の 1% です。

    <igx-linear-bar [striped]="false" [max]="200" [value]="0" [step]="1"></igx-linear-bar>

    パラメーター

    • val: number

    返却 void

value

  • get value(): number
  • set value(val: number): void
  • 現在の IgxLinearProgressBarComponent 位置を示す値を返します。

    @ViewChild("MyProgressBar")
    public progressBar: IgxLinearProgressBarComponent;
    public getValue(event) {
       let value = this.progressBar.value;
       alert(value);
    }

    返却 number

  • 現在の IgxLinearProgressBarComponent 位置を示す値を設定します。

    <igx-linear-bar [striped]="false" [max]="200" [value]="50"></igx-linear-bar>

    パラメーター

    • val: number

    返却 void

valueInPercent

  • get valueInPercent(): number
  • set valueInPercent(value: number): void
  • IgxLinearProgressBarComponent/IgxCircularProgressBarComponent 値をパーセンテージで返します。

    @ViewChild("MyProgressBar")
    public progressBar: IgxLinearProgressBarComponent; // IgxCircularProgressBarComponent
    public valuePercent(event){
       let percentValue = this.progressBar.valueInPercent;
       alert(percentValue);
    }

    返却 number

  • IgxLinearProgressBarComponent/IgxCircularProgressBarComponent 値をパーセンテージで設定します。

    @ViewChild("MyProgressBar")
    public progressBar: IgxLinearProgressBarComponent; // IgxCircularProgressBarComponent
       public setValue(event){
       this.progressBar.valueInPercent = 56;
    }
    //...
    <button igxButton="fab" igxRipple="" (click)="setValue()">setValue</button>

    パラメーター

    • value: number

    返却 void