ons-popover

ある要素を対象とするポップオーバーを表示するコンポーネントです。

実例

Popover

ons-popoverはpopoverを表示することができる要素です。ここではAngular 2下では、ons-popoverPopoverFactoryを使ってpopoverを表示するコンポーネントを作成します。

まず、ons-popoverをテンプレートのルートに置いたコンポーネントを宣言します。

@Component({
  template: `
    <ons-popover direction="up down" cancelable #popover>
      <div style="text-align: center; opacity: 0.7;">
        <p>HelloWorld!</p>
      </div>
    </ons-popover>
  `
})
class MyPopoverComponent implements OnInit {
}

次にPopoverFactoryを使ってコンポーネントを生成します。

export class AppComponent implements OnInit, OnDestroy {
  private _popover: any;
  private _destroyPopover: Function;

  constructor(private _popoverFactory: PopoverFactory) { }

  ngOnInit() {
    this._popoverFactory
      .createPopover(MyPopoverComponent, {msg: 'This is popover.'})
      .then(({popover, destroy}) => {
        this._popover = popover;
        this._destroyPopover = destroy;
      });
  }

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

popoverを表示するには、取得したons-popover要素のshow()メソッドを呼び出します。show()メソッドの第一引数には、popoverを表示する位置のベースとなる要素を指定します。

this._popover.show(button);

基本的にはAlertDialogFactoryやDialogFactoryと変わりません。AlertDialogやDialogと同様に、ngOnDestroyで作成したポップオーバーを破棄することを忘れないでください。

NgModuleへのコンポーネントの追加

PopoverFactoryを使って読み込むコンポーネントは、NgModuleのdeclarationsentryComponentsに追加することを忘れないでください。

@NgModule({
  imports: [OnsenModule],
  declarations: [AppComponent, MyPopoverComponent],
  bootstrap: [AppComponent],
  entryComponents: [MyPopoverComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
class AppModule { }

関連情報

属性

名前 型 / デフォルト値 概要
modifier String ポップオーバーの表現を指定します。 Optional.
direction String

ポップオーバーを表示する方向を空白区切りで複数指定できます。 指定できる方向は、”up”, “down”, “left”, “right”の4つです。空白区切りで複数指定することもできます。 複数指定された場合、対象とする要素に合わせて指定した値から自動的に選択されます。

Optional.
cancelable この属性があると、ポップオーバーが表示された時に、背景やバックボタンをタップした時にをポップオーバー閉じます。 Optional.
cover-target If set the popover will cover the target on the screen. (翻訳中) Optional.
animation String ポップオーバーを表示する際のアニメーション名を指定します。 Optional.
animation-options Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’} Optional.
mask-color Color 背景のマスクの色を指定します。デフォルトは”rgba(0, 0, 0, 0.2)”です。 Optional.

プロパティ概要

名前 概要
visible 要素が見える場合にtrue
cancelable

A boolean value that specifies whether the popover is cancelable or not. When the popover is cancelable it can be closed by tapping the background or by pressing the back button on Android devices.

(翻訳中)
onDeviceBackButton バックボタンハンドラ。

メソッド

シグネチャ 概要
show(target, [options]) 対象とする要素にポップオーバーを表示します。target引数には、$eventオブジェクトやDOMエレメントやCSSセレクタを渡すことが出来ます。
hide([options]) ポップオーバーを閉じます。
show(target, [options]): Promise

対象とする要素にポップオーバーを表示します。target引数には、$eventオブジェクトやDOMエレメントやCSSセレクタを渡すことが出来ます。

返り値:

パラメーター
名前 概要
target String|Event|HTMLElement ポップオーバーのターゲットとなる要素を指定します。CSSセレクタかeventオブジェクトかDOM要素のいずれかを渡せます。
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。”fade-ios”, “fade-md”, “none”, “default”のいずれかを指定できます。
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 アニメーション名を指定します。”fade-ios”, “fade-md”, “none”, “default”のいずれかを指定できます。
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.popover Object コンポーネントのオブジェクト。
event.cancel Function この関数を呼び出すと、ポップオーバーの表示がキャンセルされます。
postshow

ポップオーバーが表示された直後に発火します。

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

ポップオーバーが隠れる直前に発火します。

パラメーター
名前 概要
event Object Event object.
event.popover Object コンポーネントのオブジェクト。
event.cancel Function この関数を呼び出すと、ポップオーバーが隠れる処理をキャンセルします。
posthide

ポップオーバーが隠れた後に発火します。

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

お困りですか?

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

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

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