How to hide the tarbar when push to a subpage in f7 4?

Questions
1

Hi,
How to hide the navbar when push to a subpage in f7 4?

  <!-- Views/Tabs container -->
  <f7-views tabs class="safe-areas">
    <!-- Tabbar for switching views-tabs -->
    <f7-toolbar tabbar labels bottom>
      <f7-link tab-link="#view-home" tab-link-active icon-ios="f7:home_fil" icon-md="material:home" text="Home"></f7-link>
      <f7-link tab-link="#view-market" tab-link-active icon-ios="f7:home_fil" icon-md="material:home" text="Market"></f7-link>
      <f7-link tab-link="#view-catalog" icon-ios="f7:list_fill" icon-md="material:view_list" text="Catalog"></f7-link>
      <f7-link tab-link="#view-settings" icon-ios="f7:settings_fill" icon-md="material:settings" text="Settings"></f7-link>
    </f7-toolbar>

    <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
    <f7-view id="view-home" main tab tab-active url="/"></f7-view>
    <f7-view id="view-market" name="market" tab url="/market"></f7-view>

    <!-- Catalog View -->
    <f7-view id="view-catalog" name="catalog" tab url="/catalog/"></f7-view>

    <!-- Settings View -->
    <f7-view id="view-settings" name="settings" tab url="/settings"></f7-view>

  </f7-views>

This code generate by f7-cli,

Thank you very much!

2

iOS, MD theme? Which Navbar?

3

The buttom navbar,

Just use the default settings, you can see this online https://framework7io.github.io/framework7-template-tabs/ , first tab, " Page Loaders & Router",

And the title can’t center too, it seems the right div is too width.

f7
f7.png2192×1238 733 KB

thank you very much.

4

Everything is correct, check the navbar app settings http://framework7.io/docs/navbar.html#navbar-app-parameters

If you need to hide toolbar on subpages, then i guess you don’t need the Tabs template with multiple views, it is idea is to have Tabbar on top of pages. Or use Toolbar’s .hide method

5

Sorry, I made a mistake, I want to hide the tabbar is subpage,

navbar
navbar.png2226×156 27.5 KB

and that images i uploaded show the title can’t center in the navbar.

6

Hi!!!

Please where do you place this Toolbar’s .hide method. Is it inside the subpage or where the tabbar structure was defined?

Thanks

7

https://framework7.io/docs/toolbar-tabbar.html#toolbar-app-methods
app.toolbar.hide(toolbarEl, animate)
The method can be called from anywhere