How to add tab bar to pages?



  • 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>
    


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



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



  • @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…



  • @jamal Great. Working fine. Thanks.



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


Log in to reply