Onsen ui 更改 ons-tabbar 和 ons-sliding-menu 组件的背景颜色

Question

我是使用带有 onsen ui 的 cordova 开发混合应用程序的新手。

我正在尝试将 ons-tabbar 和 ons-sliding-menu 的背景颜色从默认颜色更改为红色，但我无法更改。

我尝试过使用内联样式，但没有成功。

有什么办法可以改变它们吗？

下面是我的标签栏代码：

<ons-tabbar style="background-color:red">


 <ons-tab
      active="true"
      label="Home"
      icon="home"
      page="pa.html"></ons-tab>

 <ons-tab
  label="Call Us"
  style="color:#fff"
  icon="fa-phone"
  page="page2.html"></ons-tab>

  <ons-tab
  label="Menu"
  style="color:#fff"
  icon="fa-building-o"
  page="men.html"></ons-tab>

   <ons-tab
  label="My Orders"
  style="color:#fff"
  icon="fa-file-text"
  page="p1.html"></ons-tab>
</ons-tabbar>

ons-sliding-menu 的代码：

 <ons-sliding-menu main-page="p2.html" menu-page="menu.html" style="background-color: #129793" max-slide-distance="260px" var="menu">
</ons-sliding-menu>

Answer 1

要设置ons-tabbar 的按钮面板部分的样式，您只需修改类.tab-bar { background-color: red; }。

滑动菜单里面包含一个简单的ons-page。因此，您可以使用ons-sliding-menu .page__background { background-color: red; } 对其进行样式设置。

下次您可以在开发者控制台中检查元素并查看背景颜色在哪里。