F7 (v8) Vue: FAB or toolbar in separate component


I’m looking for a strategy for my Floating Action Button. I’ll try to keep it short. In my app I have a FAB and I would like to make it somewhat autonomous (i.e. put it in a separate component with its own logic), I’m trying to separate concerns and in this way I can also use it on multiple pages.

Fast forward: when you create a separate component for a FAB, it seems to be working, but when the page scrolls, the FAB doesn’t stay (presumably because it’s not a direct child of the f7-page).

Sandbox: agitated-fog-8cv8wf - CodeSandbox

So my question is: what could be a good strategy to separate the FAB into a component while still keeping the functionality?

My solution for now is creating a component with all logic and use it with a ref in the page and then in the page create an f7-fab directly under f7-page and then use the ref of the component in the f7-fab. This works but it’s not a very elegant solution imho.

Thanks for your input :slight_smile:

1 Like

Temte instalar o twilwindcss talvez você consiga…