Tabbar above Toolbar in Android?



  • Hey folks,

    Simple question, if I put the tabbar at position=“auto” here : https://onsen.io/tutorial/?framework=vanilla&category=Reference&module=tabbar … in Android the tabbar will go above the toolbar. I need a different title in Tab1 and Tab2 in the toolbar, so how can I do that properly (by that I mean the tabbar just below the toolbar)?

    Thank you!



  • I don’t think that type of behaviour is currently officially supported. Since the tabbar is supposed to act as a container element having some part of the page going outside might cause some strange behaviour.

    The current “normal way” of achieving what you want would be:

    <ons-page>
     <ons-toolbar>
       <div id="tabbarTitle" class="center"></div>
     </ons-toolbar>
     <ons-tabbar>
       ...
     </ons-tabbar>
    </ons-page>
    

    and then changing tabbarTitle's content with javascript.


    Alternatively the “css hack” way would be something like this (codepen):

    .tab-bar--material {
      top: 51px;
    }
    .tab-bar--top__content {
      top: 0;
    }
    .tab-bar--material__content .navigation-bar--material ~ .page__content {
      top: 102px;
    }
    

Log in to reply