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

Questions
1

Hi,

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
2

Temte instalar o twilwindcss talvez você consiga…

3

For anyone coming across this post: I dug in to this issue again and the solution is actually pretty simple. The problem is that the f7-fab button needs to be a direct child of f7-page. Using f7-page > f7-fab does some magic, so it will render in such a way, but when doing it with a custom component, it will actually be rendered as f7-page > f7-page-content > f7-fab and that causes the fab to scroll (which is logical).

Reading through the documentation I actually discovered there is a slot for f7-page called ‘fixed’, which states the following: * fixed - element will be inserted as a direct child of “page” right before “page-content” (source: Page Vue Component | Framework7 Vue Documentation ). This actually does not work in F7 8.3.3 (using default or fixed will always render the element under f7-page-content), but using the ‘page-content’ boolean property of f7-page actually works! The resulting solution is as follows:

<f7-page :page-content="false" name="home">
  <AutonomousFab />
  <f7-page-content>
    <f7-block>page content</f7-block>
  </f7-page-content>
</f7-page>

:tada: