ある要素を対象とするポップオーバーを表示するコンポーネントです。
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).
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| 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 | String | ポップオーバーの対象とするデフォルト要素のIDを指定します。 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 |
要素が見える場合に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に記載をお願いいたします。
あわせて、下記の情報も参考にしてください。