Monaca Onsen 2.0 ons-tabbar 材质设计答案

【问题标题】：Monaca Onsen 2.0 ons-tabbar material designMonaca Onsen 2.0 ons-tabbar 材质设计
【发布时间】：2016-01-07 09:49:04
【问题描述】：

我正在使用新的 Monaca Onsen 2.0 制作一个材料设计应用程序，我使用了 ons-toolbar 并且工作正常，但我不明白如何将 ons-tabbar 与材料一起使用，有什么技巧吗？

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

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

【问题讨论】：

我只在下面的 css 参考中看到了与单选按钮一起使用的材料标签栏，但我不确定如何像 1.x 的标签栏一样流畅地获得它。 onsen.io/2/reference/css.html
您应该重新表述您的问题。我很想知道如何让材质修饰符出现。其他材料组件可以工作，但由于某种原因，这个标签栏不会

标签： cordova material-design onsen-ui monaca

【解决方案1】：

您的代码有误，因为ons-tabbar 应始终至少包含一个ons-tab。

看看这个CodePen example，一切正常。

代码如下：

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

【讨论】：

【解决方案2】：

检查你的 onsenui.js
我实际上认为 Monaca 上的项目页面可能没有更新到最新的 onsen ui 2.0。对我来说似乎就是这种情况。它可能会在第一行说：

/*! onsenui v2.0.0-beta - 2015-11-11 */

您可能需要像 Andi Pavllo 使用过的那样更新

/*! onsenui v2.0.0-beta.2 - 2015-12-01 */

然而Github上最新的Onsen UI 2.0其实是

/*! onsenui v2.0.0-beta.5 - 2016-01-08 */

而且你不能只换掉安装整个包所需的 js。

*编辑：我注意到安装新软件包后一切正常，但是当我尝试使用主题滚轮时，它又恢复到旧的标签栏。因此主题滚轮可能不会更新。

【讨论】：