JavaScript Reference > ons-popover

ons-popover

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

実例

Popover

A popover can be used to give additional information about a component or add extra functionality. In Material Design it looks like a toolbar menu or a dropdown.

The usage is very similar to that of <ons-dialog> and <ons-alert-dialog>. It is defined using the <ons-popover> tag:

<ons-popover>
  This is a popover!
</ons-popover>

It is hidden by default and usually attached directly to the <body> tag.

Displaying a popover

To display the popover you need to get a reference to the element and execute the show(target, options) method. The target argument can be either a DOM element, a query selector string or an Event object.

Loading from a template

Just like the <ons-dialog> and <ons-alert-dialog> elements the popover can be loaded from a template. It is done by using the ons.createElement(template) utility function. It returns a Promise that resolves to the popover element.

<template id="popover.html">
  <ons-popover>
    This popover is defined as a template.
  </ons-popover>
</template>

ons
  .createElement('popover.html', { append: true })
  .then(function(popover) {
    popover.show();
  });

The “cancelable” attribute

<ons-popover> supports the cancelable attribute. This enables hiding the popover when the user taps outside of it or presses the back button on an Android device.

<ons-popover cancelable>
  This popover can be cancelled!
</ons-popover>

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
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.
target String ポップオーバーの対象とするデフォルト要素のIDを指定します。 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 Boolean 要素が見える場合にtrue。 Optional.

プロパティ概要

[編集]
名前 概要
coverTarget If set the popover will cover the target on the screen. （翻訳中）
target ポップオーバーの対象とするデフォルト要素のIDを指定します。
animationOptions アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{duration: 0.2, delay: 1, timing: ‘ease-in’}
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 バックボタンハンドラ。
maskColor 背景のマスクの色を指定します。”rgba(0, 0, 0, 0.2)”がデフォルト値です。

メソッド

[編集]
シグネチャ 概要
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 ポップオーバーが隠れた後に発火します。
dialogcancel Fired when the popover is canceled. （翻訳中）
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 コンポーネントのオブジェクト。
dialogcancel

Fired when the popover is canceled. （翻訳中）

パラメーター
名前 型 概要

お困りですか?

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

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

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