Single Persistent Toolbar for all the pages?

Roozbeh Farhadi

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?

Fran Diox

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

Roozbeh Farhadi

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

Single Persistent Toolbar for all the pages? browsing