Search code examples
splitnavigationtitleonsen-ui

How to provide one heading for complete page when using "Split-view" page in onsen ui

I am working in Onsen Ui split view page functionality. I am creating a page from this link. My requirement is provide top title for complete page.

Solution

  • Well since each page in Onsen UI can have a toolbar - if you want to have a common title then you can just put the ons-split-view inside a page with a title. 

    <ons-page>
  <ons-toolbar>
    <div class="center">Complete page title</div>
  </ons-toolbar>
  <ons-split-view var="mySplitView" secondary-page="menu.html" main-page="page1.html" main-page-width="70%" collapse="width 500px">
  </ons-split-view>
</ons-page>

    Here's a demo.