Where to place a navbar, when using a common tabbar?

Questions
1

Where do I need to place a (dynamic) navbar, if I use a common tabbar?

As from the docs, I placed the toolbar/tabbar directly under/inside views.

I then placed the navbar(s) directly under page (in all pages).

On iOS that works fine, but on Android, the navbar is covered by the common toolbar.

I haven’t found any example to show common toolbar/tabbar, but individual navbars…

Any hint?

2

The following structure will be correct:

#app
  .views.tabs
    .toolbar.toolbar-bottom-md
    .view.tab#tab-1
    .view.tab#tab-2
    ...

Navbar must be still inside of the Page

3

http://framework7.io/docs/tabs.html#views-as-tabs

Additional “toolbar-bottom-md” class is also required here for MD theme

4

Most likely I don’t understand correctly :slightly_frowning_face:

Does that mean I need tabs no matter what? From the documentation I understood, they are not required.

So for now I have this, which works fine, except it places the toolbar on top of the navbar on Android, and the tab-link-active is never set (most likely, because I don’t know where to put the tabs in).

Would be great, if you could tell me, where the mistake is. Thanks in advance!

In my App.vue I define the common toolbar:

<template>
  <div id="app">
    <f7-statusbar></f7-statusbar>
    <f7-view id="main-view" url="/" main>
      <f7-toolbar tabbar labels toolbar-bottom-md>
        <f7-link tab-link route-tab-id="home" href="/home/" text="Home" icon-if-ios="f7:home_fill" icon-if-md="material:home"></f7-link>
        <f7-link tab-link route-tab-id="more" href="/more/" text="More"  icon-if-ios="f7:persons" icon-if-md="material:persons"></f7-link>
     </f7-toolbar>
...

In the home template, I define the navbar

 <template>
    <f7-page name="home" navbar-fixed hide-navbar-on-scroll>
       <f7-navbar no-hairline no-shadow class="navbar-transparent" >
          <f7-nav-left>
            <f7-link icon-if-ios="material:menu" icon-if-md="material:menu" panel-open="left"></f7-link>
          </f7-nav-left>
          <f7-nav-title>Home</f7-nav-title>
       </f7-navbar>
...
5

Tabs are not neccessary. Such Toolbar must be set as bottom for MD theme

need to be

<f7-toolbar tabbar labels bottom-md>
6

In the material guidelines there are 2 types of bars:

while the latter can be easily accomplished using the selector you showed, I was looking for the tabbar underneath the navbar… but this seems only to be possible, when no common toolbar is in use, right?

7

It is impossible with common Toolbar, and doesn’t make much sense when some elements is always on top of the View, when this element is somewhere in the middle of content. You can of course tweak it with custom styles, but the navigation will feel ugly

8

Yes - you’re right, but I had a special use-case for that… but now I switched to the bottom-bar, because it really looked quite stupid :blush:

Anyway - thanks for the clarification! :+1:

9

Ah - one more thing:

What do I need to do, so the tab-link-active selector is automatically applied? (or tab-link-highlight on Android)

I tried from your vue-webpack example, but as soon as I switch to routes, the tab-link-active is not set. Is this intended?

from my routes.js:

{
    name: 'home',
    path: '/home/',
    component: HomePage,
  },
  {
    name: 'more',
    path: '/more/',
    component: MorePage,
  },
10

Tab Links are only intended to switch Tabs, if you don’t have tabs and use them as usual links, then you need to set active class and highlight manually

11

Ah - ok, thanks -that’s what I’m doing ; from the docs I had the impression it’s handlede autmatically… - maybe you want to add this to the docs…

12

Did you fix this? I really want to know how to do this!