クラス IgxToastComponent

Ignite UI for Angular Toast - ヘルプ

Ignite UI Toast は、ユーザーが閉じられない非対話型の情報や報告メッセージを表示できます。 Toast はページの下側、中央、または上側に表示できます。 例:

<button (click)="toast.open()">Show notification</button>
<igx-toast #toast
          message="Notification displayed"
          displayTime="1000">
</igx-toast>

階層

実装

Index

コンストラクタ

constructor

プロパティ

ariaLive

ariaLive: string = 'polite'

aria-live 属性を設定または取得します。 設定されない場合、aria-live の値は "polite" となります。

<igx-toast [ariaLive] = "'polite'"></igx-toast>
let toastAriaLive = this.toast.ariaLive;
@次のメンバー:

IgxToastComponent

autoHide

autoHide: boolean = true

toast が displayTime の終了後に非表示になるかどうかを取得または設定します。 デフォルト値は true です。

<igx-toast [autoHide] = "false"></igx-toast>
let autoHide = this.toast.autoHide;
@次のメンバー:

IgxToastComponent

displayTime

displayTime: number = 4000

表示された後、toast が表示される期間 (ミリ行) を取得または設定します。 デフォルト値は 4000 です。

<igx-toast [displayTime] = "2500"></igx-toast>
let displayTime = this.toast.displayTime;
@次のメンバー:

IgxToastComponent

id

id: string = ...

toast の id を取得または設定します。 設定されない場合、id の値は "igx-toast-0" になります。

<igx-toast id = "my-first-toast"></igx-toast>
let toastId = this.toast.id;

onAppended

onAppended: EventEmitter<ToggleViewEventArgs> = ...

トグル要素がオーバーレイ コンテナに追加された後にイベントを発生します。

onAppended() {
 alert("Content appended!");
}
<div
  igxToggle
  (onAppended)='onToggleAppended()'>
</div>

onClosed

onClosed: EventEmitter<ToggleViewEventArgs> = ...

トグル コンテナが閉じた後にイベントを発生します。

onToggleClosed(event) {
 alert("Toggle closed!");
}
<div
  igxToggle
  (onClosed)='onToggleClosed($event)'>
</div>

onClosing

onClosing: EventEmitter<ToggleViewCancelableEventArgs> = ...

トグル コンテナが閉じた前にイベントを発生します。

onToggleClosing(event) {
 alert("Toggle closing!");
}
<div
 igxToggle
 (onClosing)='onToggleClosing($event)'>
</div>

onOpened

onOpened: EventEmitter<ToggleViewEventArgs> = ...

トグル コンテナが開かれた後、イベントを発行します。

onToggleOpened(event) {
   alert("Toggle opened!");
}
<div
  igxToggle
  (onOpened)='onToggleOpened($event)'>
</div>

onOpening

onOpening: EventEmitter<ToggleViewCancelableEventArgs> = ...

トグル コンテナが開いた前にイベントを発生します。

onToggleOpening(event) {
 alert("Toggle opening!");
}
<div
  igxToggle
  (onOpening)='onToggleOpening($event)'>
</div>

outlet

outlet: IgxOverlayOutletDirective | ElementRef<any>

トースト要素に使用されるコンテナを取得/設定します。

@備考:

outlet は、IgxOverlayOutletDirective または ElementRef のインスタンスです。

@例:
<div igxOverlayOutlet #outlet="overlay-outlet"></div>
//..
<igx-toast [outlet]="outlet"></igx-toast>
//..

position

position: IgxToastPosition = 'bottom'

toast の位置を取得または設定します。 設定されない場合、position 属性の値は IgxToastPosition.Bottom です。

<igx-toast [position]="top"></igx-toast>
let toastPosition = this.toast.position;
@次のメンバー:

IgxToastComponent

role

role: string = 'alert'

role 属性を取得または設定します。 設定されない場合、role の値は "alert" です。

<igx-toast [role] = "'notify'"></igx-toast>
let toastRole = this.toast.role;
@次のメンバー:

IgxToastComponent

アクセサー

element

  • get element(): any

isVisible

  • get isVisible(): boolean
  • set isVisible(value: boolean): void
  • toast の表示状態を有効または無効にします。 設定されない場合、isVisible の値は false です。

    <igx-toast [isVisible]="true"></igx-toast>
    
    let isVisible = this.toast.isVisible;
    

    双方向データ バインディング。

    <igx-toast [(isVisible)]="model.isVisible"></igx-toast>
    
    @次のメンバー:

    IgxToastComponent

    返却 boolean

  • toast の表示状態を有効または無効にします。 設定されない場合、isVisible の値は false です。

    <igx-toast [isVisible]="true"></igx-toast>
    
    let isVisible = this.toast.isVisible;
    

    双方向データ バインディング。

    <igx-toast [(isVisible)]="model.isVisible"></igx-toast>
    

    パラメーター

    • value: boolean

    返却 void

message

overlayId

  • get overlayId(): string

メソッド

close

  • close(): void

open

reposition

  • reposition(): void

setOffset

  • setOffset(deltaX: number, deltaY: number): void

toggle