Class IgxSnackbarComponent

Ignite UI for Angular Snackbar - ヘルプ

Ignite UI Snack Bar コンポーネントは一行のメッセージで操作のフィードバックを提供します。 元に戻すなどの操作へのリンクを追加できます。

例:

<button type="button" igxButton (click)="snackbar.show()">Send message</button>
<div>
<igx-snackbar #snackbar>
Message sent
</igx-snackbar>
</div>

階層

Hierarchy

  • IgxNotificationsDirective
    • IgxSnackbarComponent

実装

  • OnInit

プロパティ

actionText?: string

actionText 属性を取得または設定します。

<igx-snackbar [actionText] = "'Action Text'"></igx-snackbar>
animationDone: EventEmitter<ToggleViewEventArgs> = ...

スナックバーのアニメーションが完了するときに発生されるイベントです。 引数として ToggleViewEventArgs インターフェイスへの参照を提供します。

<igx-snackbar (animationDone) = "animationDone($event)"></igx-snackbar>
animationStarted: EventEmitter<ToggleViewEventArgs> = ...

スナックバーのアニメーションが開始するときに発生されるイベントです。 引数として ToggleViewEventArgs インターフェイスへの参照を提供します。

<igx-snackbar (animationStarted) = "animationStarted($event)"></igx-snackbar>
appended: EventEmitter<ToggleViewEventArgs> = ...

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

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

aria-live 属性を設定または取得します。 設定しない場合、aria-live"polite" です。

autoHide: boolean = true

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

clicked: EventEmitter<IgxSnackbarComponent> = ...

アクション ボタンがクリックされたときに発行されるイベントです。 引数として IgxSnackbarComponent への参照を提供します。

<igx-snackbar (clicked)="clickedHandler($event)"></igx-snackbar>
closed: EventEmitter<ToggleViewEventArgs> = ...

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

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

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

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

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

id: string = ...

Snackbar の id を取得または設定します。 設定されていない場合、最初の Snackbar コンポーネントの id"igx-snackbar-0" になります。

<igx-snackbar id = "Snackbar1"></igx-snackbar>
let snackbarId = this.snackbar.id;

次のメンバー

IgxSnackbarComponent

opened: EventEmitter<ToggleViewEventArgs> = ...

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

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

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

onToggleOpening(event) {
alert("Toggle opening!");
}
<div
igxToggle
(onOpening)='onToggleOpening($event)'>
</div>
outlet: IgxOverlayOutletDirective | ElementRef<HTMLElement>

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

備考

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

アクセサー

  • get positionSettings(): PositionSettings
  • スナックバーで使用される位置とアニメーションの設定を取得します。

    @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
    let currentPosition: PositionSettings = this.snackbar.positionSettings

    返却 PositionSettings

  • set positionSettings(settings): void
  • スナックバーで使用される位置とアニメーションの設定を設定します。

    <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;

    パラメーター

    返却 void

メソッド

  • autoHidetrue に設定されている場合、displayTime が終了した後にスナックバーを表示して非表示にします。

    this.snackbar.open();
    

    パラメーター

    • Optional message: string

    返却 void