id 属性の値を設定します。提供されていない場合は、自動的に生成されます。
<igx-linear-bar [id]="'igx-linear-bar-55'" [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
プログレス バーを不確定に設定/取得します。デフォルトの設定は false です。
<igx-linear-bar [indeterminate]="true"></igx-linear-bar>
<igx-circular-bar [indeterminate]="true"></igx-circular-bar>
進行状況が変更された後にトリガーするイベントです。
public progressChange(event) {
alert("Progress made!");
}
//...
<igx-circular-bar [value]="currentValue" (progressChanged)="progressChange($event)"></igx-circular-bar>
<igx-linear-bar [value]="currentValue" (progressChanged)="progressChange($event)"></igx-linear-bar>
role 属性の値を設定します。指定しない場合は、自動的に progressbar に設定されます。
<igx-linear-bar role="progressbar"></igx-linear-bar>
IgxLinearProgressBarComponent をストライプ スタイルに設定します。デフォルトの設定は false です。
<igx-linear-bar [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
定義された位置に基づいて表示されるカスタム テキストを設定します。
<igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></igx-linear-bar>
テキスト配置を定義する位置を設定します。
オプションは 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>
テキストをイナズマ線の上に配置するかどうかを定義する位置を設定します。デフォルトで false に設定されます。
<igx-linear-bar type="error" [textTop]="true"></igx-linear-bar>
テキストを表示するかどうかを設定します。デフォルトで true に設定されます。
<igx-linear-bar type="default" [textVisibility]="false"></igx-linear-bar>
IgxLinearProgressBarComponent のタイプを設定します。オプションは default、success、info、warning、およびerror です。
<igx-linear-bar [striped]="false" [max]="100" [value]="0" type="error"></igx-linear-bar>
progress barにアニメーションがあるかどうかを true/false として返します。
@ViewChild("MyProgressBar")
public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent;
public animationStatus(event) {
let animationStatus = this.progressBar.animate;
alert(animationStatus);
}
進行状況をアニメーション化します。デフォルトで true に設定されます。
<igx-linear-bar [animate]="false" [max]="200" [value]="50"></igx-linear-bar>
<igx-circular-bar [animate]="false" [max]="200" [value]="50"></igx-circular-bar>
progress bar の最大進行状況値を返します。
@ViewChild("MyProgressBar")
public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent;
public maxValue(event) {
let max = this.progressBar.max;
alert(max);
}
渡すことができる最大値を設定します。デフォルトで 100 に設定されます。
<igx-linear-bar [max]="200" [value]="0"></igx-linear-bar>
<igx-circular-bar [max]="200" [value]="0"></igx-circular-bar>
progress bar の進行状況インジケーターを更新する値を返します。
@ViewChild("MyProgressBar")
public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent;
public stepValue(event) {
let step = this.progressBar.step;
alert(step);
}
進行状況インジケーターの更新量の値を設定します。これはデフォルトでは 1 です。
<igx-linear-bar [max]="200" [value]="0" [step]="1"></igx-linear-bar>
<igx-circular-bar [max]="200" [value]="0" [step]="1"></igx-circular-bar>
現在の IgxLinearProgressBarComponent 位置を示す値を返します。
@ViewChild("MyProgressBar")
public progressBar: IgxLinearProgressBarComponent;
public getValue(event) {
let value = this.progressBar.value;
alert(value);
}
現在の IgxLinearProgressBarComponent 位置を示す値を設定します。
<igx-linear-bar [striped]="false" [max]="200" [value]="50"></igx-linear-bar>
IgxLinearProgressBarComponent/IgxCircularProgressBarComponent 値をパーセンテージとして返します。
@ViewChild("MyProgressBar")
public progressBar: IgxLinearProgressBarComponent; // IgxCircularProgressBarComponent
public valuePercent(event){
let percentValue = this.progressBar.valueInPercent;
alert(percentValue);
}
プログレス バーを不確定に設定/取得します。デフォルトでは 2000ms です。