React Reference > ons-popover Component

<ons-popover />

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

実例

Popover

The Popover component displays a box next to a target component or element. It can be used to show a tooltip, an info box or even for displaying a menu.

The popover will automatically alter its style based on the platform. On Android it will be displayed as a Material Design component.

To show or hide a popover the isOpen property is used. To determine which component it should visually point to, the getTarget property must be set to a function that returns a reference either to an React component or a DOM element.

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
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に記載をお願いいたします。

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