トグル要素がオーバーレイ コンテナーに追加された後にイベントを発生します。
onAppended() {
alert("Content appended!");
}
<div
igxToggle
(onAppended)='onToggleAppended()'>
</div>
aria-live 属性を設定または取得します。
設定しない場合、aria-live は "polite" です。
要素が displayTime の終了後に非表示になるかどうかを取得または設定します。
デフォルト値は true です。
トグル コンテナーが閉じた後にイベントを発生します。
onToggleClosed(event) {
alert("Toggle closed!");
}
<div
igxToggle
(onClosed)='onToggleClosed($event)'>
</div>
トグル コンテナーが閉じた前にイベントを発生します。
onToggleClosing(event) {
alert("Toggle closing!");
}
<div
igxToggle
(closing)='onToggleClosing($event)'>
</div>
表示された後、要素が表示される期間 (ミリ行)
を取得または設定します。
デフォルト値は 4000 です。
トーストの id を取得または設定します。
設定しない場合、id は "igx-toast-0" です。
<igx-toast id = "my-first-toast"></igx-toast>
let toastId = this.toast.id;
トグル コンテナーが開かれた後、イベントを発行します。
onToggleOpened(event) {
alert("Toggle opened!");
}
<div
igxToggle
(onOpened)='onToggleOpened($event)'>
</div>
トグル コンテナーが開いた前にイベントを発生します。
onToggleOpening(event) {
alert("Toggle opening!");
}
<div
igxToggle
(onOpening)='onToggleOpening($event)'>
</div>
要素に使用されるコンテナーを取得または設定します。
outlet は、IgxOverlayOutletDirective または ElementRef のインスタンスです。
role 属性を取得または設定します。
設定しない場合、role は "alert" です。
<igx-toast [role] = "'notify'"></igx-toast>
let toastRole = this.toast.role;
IgxToastComponent
トーストの nativeElement を取得します。
let nativeElement = this.toast.element;
IgxToastComponent
要素の表示状態を有効または無効にします。
設定されていない場合、isVisible 属性の値は false です。
コンテンツが描画されるオーバーレイの ID を返します。
this.myToggle.overlayId;
トーストで使用される位置とアニメーションの設定を取得します。
@ViewChild('toast', { static: true }) public toast: IgxToastComponent;
let currentPosition: PositionSettings = this.toast.positionSettings
トーストで使用される位置とアニメーションの設定を設定します。
<igx-toast [positionSettings]="newPositionSettings"></igx-toast>
import { slideInTop, slideOutBottom } from 'igniteui-angular';
...
@ViewChild('toast', { static: true }) public toast: IgxToastComponent;
public newPositionSettings: PositionSettings = {
openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}),
closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}),
horizontalDirection: HorizontalAlignment.Left,
verticalDirection: VerticalAlignment.Middle,
horizontalStartPoint: HorizontalAlignment.Left,
verticalStartPoint: VerticalAlignment.Middle
};
this.toast.positionSettings = this.newPositionSettings;
トーストを表示します。
autoHide が有効な場合、トーストは displayTime 終了後に非表示になります。
this.toast.open();
Ignite UI for Angular Toast - ヘルプ
Ignite UI Toast は、ユーザーが閉じられない非対話型の情報や報告メッセージを表示できます。 Toast はページの下側、中央、または上側に表示できます。
例: