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; }