クラス IgxCircularProgressBarComponent

階層

  • BaseProgressDirective
    • IgxCircularProgressBarComponent

実装

  • AfterViewInit
  • AfterContentInit

Index

コンストラクタ

constructor

プロパティ

gradientTemplate

gradientTemplate: IgxProgressBarGradientDirective

id

id: string = ...

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

<igx-circular-bar [id]="'igx-circular-bar-55'" [value]="50"></igx-circular-bar>

indeterminate

indeterminate: boolean = false

indeterminate 属性の値を設定する @Input プロパティ。指定しない場合は、自動的に false に設定されます。

<igx-circular-bar [indeterminate]="true"></igx-circular-bar>

progressChanged

progressChanged: EventEmitter<IChangeProgressEventArgs> = ...

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

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>

text

text: string

igxCircularBar に表示するテキストを取得または設定します。

<igx-circular-bar text="Progress"></igx-circular-bar>
let text = this.circularBar.text;

textTemplate

textTemplate: IgxProcessBarTextTemplateDirective

textVisibility

textVisibility: boolean = true

テキストの表示状態を設定します。デフォルトで true に設定されます。

<igx-circular-bar [textVisibility]="false"></igx-circular-bar>

アクセサー

animate

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

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

    返却 boolean

  • 進行状況をアニメーション化します。デフォルトで 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>
    

    パラメーター

    • animate: boolean

    返却 void

max

  • get max(): number
  • set max(maxNum: number): void

step

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

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

    返却 number

  • 進行状況インジケーターの更新量の値を設定します。デフォルト値は最大値の 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>
    

    パラメーター

    • val: number

    返却 void

value

  • get value(): number
  • set value(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;
    }
    

    パラメーター

    • value: number

    返却 void

メソッド

ngAfterContentInit

  • ngAfterContentInit(): void

ngAfterViewInit

  • ngAfterViewInit(): void