v-ons-popover

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

実例

Popover

The VOnsPopover 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.

To show or hide a popover the visible property is used. Similar to other components, an update:visible event is fired whenever the user interacts with the popover and allow to refresh the value of visible prop. Vue’s sync modifier can be used.

In order to determine which component it should visually point to, the target prop must be set to either a Vue component reference ($refs), DOM element, DOM query (e.g 'div#id.class' or an event. In the provided example, $event is used to display the popover on $event.target.

The popover will automatically alter its style based on the platform. On Android it will be displayed as a Material Design component that can be used as a menu. The prop coverTarget is provided in order to optionally show the popover over the original target (only for Material Design).

関連情報

Prop一覧

名前 型 / デフォルト値 概要
cancelable Boolean この属性があると、ポップオーバーが表示された時に、背景やバックボタンをタップした時にをポップオーバー閉じます。 Optional.
cover-target Boolean If set the popover will cover the target on the screen. (翻訳中) Optional.
direction String

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

Optional.
mask-color Color 背景のマスクの色を指定します。デフォルトは”rgba(0, 0, 0, 0.2)”です。 Optional.
modifier String ポップオーバーの表現を指定します。 Optional.
options.animation String ポップオーバーを表示する際のアニメーション名を指定します。 Optional.
options.animationOptions Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’} Optional.
target Ref|String|Event|HTMLElement Target component. Can be either a Vue component reference, a CSS selector, an event object or a DOM component. It can also be provided as options.target. (翻訳中) Optional.
visible Boolean Specify the visibility of the component. (翻訳中) Optional.

イベント

名前 概要
preshow ポップオーバーが表示される直前に発火します。
postshow ポップオーバーが表示された直後に発火します。
prehide ポップオーバーが隠れる直前に発火します。
posthide ポップオーバーが隠れた後に発火します。
update:visible Fired right after user interaction. Useful to update visible prop. (翻訳中)
deviceBackButton Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler. (翻訳中)
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 コンポーネントのオブジェクト。
update:visible

Fired right after user interaction. Useful to update visible prop. (翻訳中)

パラメーター
名前 概要
event Number New value for visible prop. (翻訳中)
deviceBackButton

Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler. (翻訳中)

パラメーター
名前 概要
event Object Event object. (翻訳中)
event.preventDefault Function Avoids the default behavior. (翻訳中)
event.callParentHandler Function Runs the handler for the immediate parent that supports device back button. (翻訳中)

お困りですか?

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

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

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