Single Persistent Toolbar for all the pages?
-
Hello,
I need to use 1 toolbar for all the pages in my onsen ui project.
The only purpose of this is to prevent the toolbar from sliding in/out between each page transition to give that native feel to the app.
So I tried to simply put the toolbar outside of the page like so:
<ons-toolbar style="background-color:#1e1c1f !important; border:none !important;"> <div class="left"><ons-back-button>Back</ons-back-button></div> <div class="center smaler" style="text-align: center">Title</div> </ons-toolbar> <ons-navigator id="myNavigator" page="login.html"></ons-navigator> <ons-template id="login.html"> <ons-page id="login" modifier="full_bg"> </div> </ons-page> </ons-template> <ons-template id="login2.html"> <ons-page id="login2" modifier="full_bg"> </div> </ons-page> </ons-template>
With the code above, the Toolabr is persistant (fixed) and works as i want it to work…
But with this code, the Back button doesn’t really work properly! could someone please advise on how to have a single persistant Toolbar for all the pages with a back button that works properly?
-
@Roozbeh-Farhadi Precisely I thought the toolbar animation was helping for the native feel. Otherwise you can just overwrite backButton’s
onClick
property and use the navigator you want for the popPage.
-
@Fran-Diox said:
@Roozbeh-Farhadi Precisely I thought the toolbar animation was helping for the native feel. Otherwise you can just overwrite backButton’s
onClick
property and use the navigator you want for the popPage.that’s what I thought but the toolbar slides in/out with each page transition…
have a look at the example in this page:
that is what I’m trying achieve without using
<script type="text/ng-template" id="page.html">