Optional actionactionText 属性を取得または設定します。
<igx-snackbar [actionText] = "'Action Text'"></igx-snackbar>
スナックバーのアニメーションが完了するときに発生されるイベント。
引数として ToggleViewEventArgs インターフェイスへの参照を提供します。
<igx-snackbar (animationDone) = "animationDone($event)"></igx-snackbar>
スナックバーのアニメーションが開始するときに発生されるイベント。
引数としてToggleViewEventArgs インターフェイスへの参照を提供します。
<igx-snackbar (animationStarted) = "animationStarted($event)"></igx-snackbar>
トグル要素がオーバーレイ コンテナーに追加された後にイベントを発生します。
onAppended() {
alert("Content appended!");
}
<div
igxToggle
(onAppended)='onToggleAppended()'>
</div>
aria-live 属性を設定または取得します。
設定しない場合、aria-live は "polite" です。
要素が displayTime の終了後に非表示になるかどうかを取得または設定します。
デフォルト値は true です。
アクション ボタンがクリックされたときに発行されるイベント。
引数として IgxSnackbarComponent への参照を提供します。
<igx-snackbar (clicked)="clickedHandler($event)"></igx-snackbar>
トグル コンテナーが閉じた後にイベントを発生します。
onToggleClosed(event) {
alert("Toggle closed!");
}
<div
igxToggle
(onClosed)='onToggleClosed($event)'>
</div>
トグル コンテナーが閉じた前にイベントを発生します。
onToggleClosing(event) {
alert("Toggle closing!");
}
<div
igxToggle
(closing)='onToggleClosing($event)'>
</div>
表示された後、要素が表示される期間 (ミリ行)
を取得または設定します。
デフォルト値は 4000 です。
Snackbar のid を取得または設定します。
設定されていない場合、最初の Snackbar コンポーネントのid は "igx-snackbar-0" になります。
<igx-snackbar id = "Snackbar1"></igx-snackbar>
let snackbarId = this.snackbar.id;
IgxSnackbarComponent
トグル コンテナーが開いた後にイベントを発生します。
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 のインスタンスです。
要素の表示状態を有効または無効にします。
設定されていない場合、isVisible 属性の値は false です。
コンテンツが描画されるオーバーレイの ID を返します。
this.myToggle.overlayId;
スナックバーで使用される位置とアニメーションの設定を取得します。
@ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
let currentPosition: PositionSettings = this.snackbar.positionSettings
スナックバーで使用される位置とアニメーションの設定を設定します。
<igx-snackbar [positionSettings]="newPositionSettings"></igx-snackbar>
import { slideInTop, slideOutBottom } from 'igniteui-angular';
...
@ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
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,
minSize: { height: 100, width: 100 }
};
this.snackbar.positionSettings = this.newPositionSettings;
Ignite UI for Angular Snackbar - ヘルプ
Ignite UI Snack Bar コンポーネントは一行のメッセージで操作のフィードバックを提供します。 元に戻すなどの操作へのリンクを追加できます。
例: