ある要素を対象とするポップオーバーを表示するコンポーネントです。
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 v-model directive can be used with v-model:visible.
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).
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| animation | String | ポップオーバーを表示する際のアニメーション名を指定します。 Optional. |
| animationOptions | Expression | アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. {duration: 0.2, delay: 1, timing: ‘ease-in’} Optional. |
| cancelable | Boolean | この属性があると、ポップオーバーが表示された時に、背景やバックボタンをタップした時にをポップオーバー閉じます。 Optional. |
| coverTarget | Boolean | If set the popover will cover the target on the screen. （翻訳中） Optional. |
| direction | String |
ポップオーバーを表示する方向を空白区切りで複数指定できます。 指定できる方向は、”up”, “down”, “left”, “right”の4つです。空白区切りで複数指定することもできます。 複数指定された場合、対象とする要素に合わせて指定した値から自動的に選択されます。 Optional. |
| maskColor | Color | 背景のマスクの色を指定します。デフォルトは”rgba(0, 0, 0, 0.2)”です。 Optional. |
| modifier | String | ポップオーバーの表現を指定します。 Optional. |
| target | String | ポップオーバーの対象とするデフォルト要素のIDを指定します。 Optional. |
| target | Ref | Target element. Must be a Vue ref. （翻訳中） Optional. |
| visible | Boolean |
要素が見える場合にtrue。
Optional.
|
| visible | Boolean | Specify the visibility of the component. （翻訳中） Optional. |
| 名前 | 概要 |
|---|---|
| preshow | ポップオーバーが表示される直前に発火します。 |
| postshow | ポップオーバーが表示された直後に発火します。 |
| prehide | ポップオーバーが隠れる直前に発火します。 |
| posthide | ポップオーバーが隠れた後に発火します。 |
| dialogcancel | Fired when the popover is canceled. （翻訳中） |
| 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. （翻訳中） |
ポップオーバーが表示される直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.popover | Object | コンポーネントのオブジェクト。 |
| event.cancel | Function | この関数を呼び出すと、ポップオーバーの表示がキャンセルされます。 |
ポップオーバーが表示された直後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.popover | Object | コンポーネントのオブジェクト。 |
ポップオーバーが隠れる直前に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.popover | Object | コンポーネントのオブジェクト。 |
| event.cancel | Function | この関数を呼び出すと、ポップオーバーが隠れる処理をキャンセルします。 |
ポップオーバーが隠れた後に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | Event object. |
| event.popover | Object | コンポーネントのオブジェクト。 |
Fired when the popover is canceled. （翻訳中）
| 名前 | 型 | 概要 |
|---|
Fired right after user interaction. Useful to update visible prop.
（翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| event | Number |
New value for visible prop.
（翻訳中）
|
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に記載をお願いいたします。
あわせて、下記の情報も参考にしてください。