Monaca Onsen 2.0 ons-tabbar material design

Question

I'm making an material design app with the new Monaca Onsen 2.0, I used ons-toolbar and works fine, but I can't understand how to use ons-tabbar with material, some trick?

<ons-toolbar modifier="material"> WORKS FINE </ons-toolbar>

<ons-tabbar modifier="material"> NOT WORKING WITH MATERIAL </ons-tabbar>

I have only seen the material tabbar used with radio buttons such as in the css reference below, but I am not sure how to get it as smoothly as the 1.x tabbar. onsen.io/2/reference/css.html — John Gonzalez
You should probably rephrase your question. I am curious to understand how to get the material modifier to show up. Other material components work but for some reason this tabbar won't — John Gonzalez

Andi Pavllo Andi Pavllo · Accepted Answer · 2016-01-08T05:38:13

Your code is wrong because ons-tabbar should always contain at least one ons-tab.

Take a look at this CodePen example, everything is working fine.

Here is the code:

<ons-tabbar modifier="material">
  <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>

<ons-template id="home.html">
  <ons-toolbar>
    <div class="center">Home</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="comments.html">
  <ons-toolbar>
    <div class="center">Comments</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="tags.html">
  <ons-toolbar>
    <div class="center">Tags</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="feed.html">
  <ons-toolbar>
    <div class="center">Feed</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="settings.html">
  <ons-toolbar>
    <div class="center">Settings</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

Monaca Onsen 2.0 ons-tabbar material design

2 Answers