Slots, alignments and positions

I want to achieve some layout in F7 but I get struggle.

First I need a map component (which I already have) to be rendered once - even when go to previous page and then come back, the map shouldn’t be load more than once.

Second I want the map to overflow all the content and in top of the page (just below navbar header)
I want to put an Insent block with paddings so the map will be seen and it will be layed on top of it.

Then I want to stick a block to the bottom of the page, just like the toolbar.

This is what I have now:

<Page noSwipeback>
  <Header title={title}  back slot="fixed" />
  <Block top>
      Should be in top of page, above the map, with margins aside.
  <Block bottom>
      Should be just above the block which is above the toolbar
  <Block bottom>
      Should be just above the toolbar
  <Mapbox mapId="load-only-once" />
  <Toolbar tabbar bottom slot="fixed">
    <Link bgColor="primary" textColor="white">

I don’t know how to achieve this using F7. Maybe someone can fix my code or give me some tips?

You need to enable keepAlive on route to keep map and component rendered once.

For other things, just assign classes to blocks and use CSS to position them how you need

Thanks for your reply. About the keep alive: if I have the same page with different ID’s?
for example: page.html?id=1 page.html?id=2 If I set that page.html will keep alive, does it get applied with any of it’s ID’s?

1 Like