Slots, alignments and positions

Questions
1

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>
    <p>
      Should be in top of page, above the map, with margins aside.
    </p>
  </Block>
  <Block bottom>
      Should be just above the block which is above the toolbar
  </Block>
  <Block bottom>
      Should be just above the toolbar
  </Block>
  <Mapbox mapId="load-only-once" />
  <Toolbar tabbar bottom slot="fixed">
    <Link bgColor="primary" textColor="white">
      Text
    </Link>
  </Toolbar>
</Page>

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

2

You need to enable keepAlive on route https://framework7.io/docs/routes.html#keep-alive to keep map and component rendered once.

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

3

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?

4

https://framework7.io/docs/routes.html#keep-alive

1 Like