クラス IgxSnackbarComponent

Ignite UI for Angular Snackbar - ヘルプ

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

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

階層

  • IgxNotificationsDirective
    • IgxSnackbarComponent

実装

  • OnInit

Index

プロパティ

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>
d$: Subject<boolean> = ...
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 isVisible(): boolean
  • set isVisible(value: boolean): void
  • get overlayId(): string
  • スナックバーで使用される位置とアニメーションの設定を取得します。

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

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

    パラメーター

    返却 void

メソッド

  • close(): void
  • open(message?: string): void
  • autoHidetrue に設定されている場合、displayTime が終了した後にスナックバーを表示して非表示にします。

    this.snackbar.open();
    

    パラメーター

    • オプション message: string

    返却 void

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