3. Single Persistent Toolbar for all the pages?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Single Persistent Toolbar for all the pages?

  • R

    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?

    0 1 Reply
  • 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.

    0
    R
     1 Reply
  • R

    @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">
    0