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?


  • Onsen UI

    @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:

    http://stackoverflow.com/questions/31880843/onsen-ui-can-i-use-same-header-or-menu-and-footer-for-all-the-html-files-if-ye

    that is what I’m trying achieve without using

    <script type="text/ng-template" id="page.html">
    

Log in to reply