[solved] How to open popup with FAB?


#1

Hello,
Do you know how to open a popup with a FAB button?
I tried adding popup-open="#popup" to my <f7-fab /> element without success.
Note that I have on the same page the following element that opens the popup perfectly:
<f7-button fill raised popup-open="#popup">Popup</f7-button>
I’m using this as my base template: https://github.com/framework7io/framework7-template-vue-webpack
Thanks for your help,
Pitouli

Edit: since FAB only support href, I think the following could be the solution:
https://framework7.io/docs/routes.html#routable-modals
Issue : when I declare the following in my router, I have a black semi transparent overlay on my app when loading, despite not being on the popup path :cry:
{ path: '/book/', popup: { component: BookRoomPage } }

Edit2: Youhou! Found the solution! :smile:
If the popup is loaded as a component from a route, then the component should have the full strcture in the template: <f7-popup><f7-view><f7-page>...</></></>
And you should completely remove the popup from the app.vue page.

Now, my FAB button completely works :slight_smile: