3. How to add tab bar to 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.

How to add tab bar to pages?

  • T

    I am working on a project based on the following template:
    http://tutorial.onsen.io/?framework=vanilla&category=reference&module=splitter

    How do I make a tab bar appear at the bottom of all pages.

    Adding a similar code to below makes the splitter menu to stop working.

    <ons-tabbar>
  <ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
  <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
  <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
  <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
</ons-tabbar>
    0 1 Reply
  • 侍

    @timwd In the dropdown of the tutorial site, are some common patterns. Although you want splitter and tabbar there is navigator and tabbar which is similar. http://tutorial.onsen.io/?framework=vanilla&category=common patterns&module=navigator_tabbar

    0
  • T

    So, it’s not possible to have splitter and tabbar?

    0 2 Replies

  • @timwd,

    The following shows the tabbar on **all ** page with no problem!

    I used <ons-bottom-toolbar> inside (bottom) of the <ons-splitter> tag.

     <ons-bottom-toolbar>
      <ons-tabbar>
        <ons-tab page="home.html" onclick="fn.load('home.html')" label="Home" icon="ion-home" active="true"></ons-tab>
        <ons-tab page="about.html" onclick="fn.load('about.html')" label="about" icon="ion-chatbox-working"></ons-tab>
        <ons-tab page="tags.html" onclick="fn.load('tags.html')" label="Tags" icon="ion-ios-pricetag"></ons-tab>
        <ons-tab page="settings.html" onclick="fn.load('settings.html')" label="Settings" icon="ion-ios-cog"></ons-tab>
      </ons-tabbar>
    </ons-bottom-toolbar>

    As in the following:

    <ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('home.html')" tappable>
          Home
        </ons-list-item>
        <ons-list-item onclick="fn.load('settings.html')" tappable>
          Settings
        </ons-list-item>
        <ons-list-item onclick="fn.load('about.html')" tappable>
          About
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
    <ons-bottom-toolbar>
      <ons-tabbar>
        <ons-tab page="home.html" onclick="fn.load('home.html')" label="Home" icon="ion-home" active="true"></ons-tab>
        <ons-tab page="about.html" onclick="fn.load('about.html')" label="about" icon="ion-chatbox-working"></ons-tab>
        <ons-tab page="tags.html" onclick="fn.load('tags.html')" label="Tags" icon="ion-ios-pricetag"></ons-tab>
        <ons-tab page="settings.html" onclick="fn.load('settings.html')" label="Settings" icon="ion-ios-cog"></ons-tab>
      </ons-tabbar>
    </ons-bottom-toolbar>
</ons-splitter>

    Rest of code…js, etc…

    1
  • T

    @jamal Great. Working fine. Thanks.

    0
  • 侍

    @timwd said:

    So, it’s not possible to have splitter and tabbar?

    No, it absolutely is. I was showing you there are several tutorials on using tabbar with other components. You just have to follow them which is what @jamal provided.

    0