Angular 2+ Reference > ons-modal

ons-modal

画面全体をマスクするモーダル用コンポーネントです。下側にあるコンポーネントは、 モーダルが表示されている間はイベント通知が行われません。

実例

Angular 2ではons-modal要素とModalFactoryを使って今の画面の前面に出る要素(いわゆるモーダル)を作ることができます。

まず<ons-modal>をテンプレートのトップに置いたコンポーネントを宣言します。

@Component({
  template: `
    <ons-modal #modal>
      <p><span (click)="modal.hide()" style="text-decoration: underline; cursor: pointer;">Click</span> to hide this modal.</p>
    </ons-modal>
  `
})
class MyModalComponent { }

次にModalFactoryを使ってこのコンポーネントを生成します。この利用方法は、AlertDialogFactoryやDialogFactoryとほとんど変わりません。

export class AppComponent implements AfterViewInit, OnDestroy {
  private _modal: any;
  private _destroyModal: Function;

  constructor(private _modalFactory: ModalFactory) {
  }

  ngAfterViewInit() {
    this._modalFactory
      .createModal(MyModalComponent, {message: 'This is just an example.'})
      .then(({modal, destroy}) => {
        this._modal = modal;
        this._destroyModal = destroy;
      });
  }

  ngOnDestroy() {
    this._destroyModal();
  }
}

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
animation String
default 		モーダルを表示する際のアニメーション名を指定します。”none”もしくは”fade”,”lift”を指定できます。 Optional.
animation-options Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’} Optional.
visible Boolean 要素が見える場合にtrue。 Optional.

プロパティ概要

[編集]
名前 概要
animationOptions アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{duration: 0.2, delay: 1, timing: ‘ease-in’}
onDeviceBackButton バックボタンハンドラ。
visible 要素が見える場合にtrue。

メソッド

[編集]
シグネチャ 概要
show([options]) モーダルを表示します。
toggle([options]) モーダルの表示を切り替えます。
hide([options]) モーダルを非表示にします。
show([options]): Promise

モーダルを表示します。

返り値:

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。”none”, “fade”のいずれかを指定します。
options.animationOptions String アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’}
options.callback Function モーダルが表示され終わった後に呼び出される関数オブジェクトを指定します。
toggle([options])

モーダルの表示を切り替えます。

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。”none”, “fade”のいずれかを指定します。
options.animationOptions String アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’}
options.callback Function モーダルが表示され終わった後に呼び出される関数オブジェクトを指定します。
hide([options]): Promise

モーダルを非表示にします。

返り値:

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。”none”, “fade”のいずれかを指定します。
options.animationOptions String アニメーション時のduration, delay, timingを指定します。e.g. {duration: 0.2, delay: 0.4, timing: ‘ease-in’}
options.callback Function モーダルが表示され終わった後に呼び出される関数オブジェクトを指定します。

イベント

[編集]
名前 概要
preshow モーダルが表示される直前に発火します。
postshow モーダルが表示された直後に発火します。
prehide モーダルが隠れる直前に発火します。
posthide モーダルが隠れた後に発火します。
preshow

モーダルが表示される直前に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.modal Object コンポーネントのオブジェクト。
event.cancel Function この関数を実行すると、ダイアログの表示がキャンセルされます。
postshow

モーダルが表示された直後に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.modal Object コンポーネントのオブジェクト。
prehide

モーダルが隠れる直前に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.modal Object コンポーネントのオブジェクト。
event.cancel Function この関数を実行すると、ダイアログの非表示がキャンセルされます。
posthide

モーダルが隠れた後に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.modal Object コンポーネントのオブジェクト。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。