v-ons-popover not showing
-
Hi, I’m trying to make this code works but it doesn’t. It only shows the popover overlay and not the popover itself. I’m trying to create a toolbar component with a popover under the toolbar button like in the official example
<template> <v-ons-toolbar class="app-toolbar"> <div class="left" v-if="back"> <v-ons-back-button>{{backLabel}}</v-ons-back-button> </div> <div class="center">{{title}}</div> <div class="right"> <v-ons-toolbar-button @click="togglePopover($event)"> <v-ons-icon icon="bars" ></v-ons-icon> </v-ons-toolbar-button> </div> <v-ons-popover cancelable :visible.sync="popoverVisible" :target="popoverTarget" direction="down" > <p style="text-align: center">Lorem ipsum</p> </v-ons-popover> </v-ons-toolbar> </template> <script> export default { props: { back: { type: Boolean, required: false, default: false }, backLabel: { type: String, required: false, default: '' }, title: { type: String, required: true } }, data(){ return{ popoverVisible: false, popoverTarget: null } }, methods: { togglePopover(event) { this.popoverTarget = event; this.popoverVisible = !this.popoverVisible; } } } </script>
I tried this for 2 hours now and still scratching my head thinking what I did wrong :confused: . Please help
-
@Adi-Abdullah Are you using
vue@2.3.0
andvue-onsenui@2.0.0-beta.4
? In general, a popover should be placed on av-ons-page
, not on av-ons-toolbar
. However, I think that should still work after beta.4.
-
I’m using currently using these:
- onsenui@2.2.6
- vue@2.3.0
- vue-onsenui@2.0.0-beta.4
@Fran-Diox said:
However, I think that should still work after beta.4.
I can’t seem to get it working. Is there anyway for me to do this? I want to put them together because it’s part of the toolbar component. I even tried adding v-ons-page to the component haha
<v-ons-page> <v-ons-toolbar class="app-toolbar"> <div class="left" v-if="back"> <v-ons-back-button>{{backLabel}}</v-ons-back-button> </div> <div class="center">{{title}}</div> <div class="right"> <v-ons-toolbar-button @click="togglePopover($event)"> <v-ons-icon icon="bars" ></v-ons-icon> </v-ons-toolbar-button> </div> </v-ons-toolbar> <v-ons-popover cancelable :visible.sync="popoverVisible" :target="popoverTarget" direction="down" > <p style="text-align: center">Lorem ipsum</p> </v-ons-popover> </v-ons-page>
-
@Adi-Abdullah Something like this?
-
Yeah, just like that. I found out that it’s my fault . Here’s my main.js
import './css/fonts.css'; // Onsen UI Styling and Icons import 'onsenui/css/onsenui.css'; import 'onsenui/css/onsen-css-components.css'; //Custom theme // import './css/onsenui/onsen-css-components.css';
I was using a custom theme I created using the theme roller, when I commented that out, it was working. Maybe it just ain’t showing just now. lol my bad. Althought its weird that using the custom theme made it non existent :laughing: .
Edit:
Tested with a newly created theme, seems like the toolbar is referenced as navigation-bar in theme roller. Maybe this made it so it’s not working?
-
@Adi-Abdullah The Theme Roller is only valid for versions up to 2.1.0. After that, the core CSS changed and there is a new local tool for generating themes. When you install Onsen UI (
npm install onsenui
) you can find this tool innode_modules/onsenui/css-components-src
.