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; }设置样式。

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

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

1 个答案: