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

Question

我是使用 cordova 和 onsen 进行混合应用程序开发的新手 ui。

我正在尝试将 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 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 按钮面板部分的样式，您只需修改 class .tab-bar { background-color: red; }。

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

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

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

Onsen ui change background color of ons-tabbar and ons-sliding-menu components

cordova

onsen-ui