如何在离子应用程序中更改选项卡的颜色？

Question

我希望将标签的活动颜色更改为自定义颜色.如果可能的话,我还想更改图标的颜色.

目前我所在的标签是正面颜色,其余标签是灰色的.

对于那些不熟悉离子但是css天才的人来说,离子有许多默认的设定颜色,例如:positive = blue,assertive = red.

这是我到目前为止:

tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">    

 <!-- Home Tab -->    

 <ion-tab title="Home" icon-off="ion-home" icon-on="ion-android-home" href="#/app/home">
    <ion-nav-view name="app-home"></ion-nav-view> 
  </ion-tab>

CSS:

.tabs-color-active-positive, .tabs {
color: #c49137 !important;

}

我已经搞乱了css代码和声明,但它并没有什么区别.

Answer 1

首先,.tabs不指向任何事情.因此需要从CSS选择器中更正或删除它.如果要定位其他2个元素,则需要向它们添加类.

通常,如果图标具有透明背景并且创建为.PNG,则图标将更改颜色.尝试更改这些Font Awesome图标的颜色,看看它们如何从黑色变为蓝色:https://fortawesome.github.io/Font-Awesome/icons/

现在来修复代码:

我假设有一个</ion-tabs>标签,上面的例子中没有.所以我在这里添加了它,单独添加了<ion-tab>&的其他类<ion-nav-view>.本.tab类允许用户将多个选项卡一起使用jQuery或通过CSS针对他们的时候.

HTML:

<ion-tabs class="tabs-icon-top tabs-color-active-positive">      
    <ion-tab class="tab tab-home" title="Home" icon-off="ion-home" icon-on="ion-android-home" href="#/app/home">
        <ion-nav-view class="nav-view-home" name="app-home"></ion-nav-view> 
    </ion-tab>
</ion-tabs>

在.tabs-icon-top类名是根类的名称.这是可选的.建议使用它,这样你的CSS代码/颜色就不会溢出到页面上应用了它.tab或.tab-home类名的任何其他位置.您可以使用这些CSS选择器中的任何一个,并且不需要整个堆栈.随着他们向右前进,他们会变得更加具体.(根据需要随意删除第1,2或3行和逗号.)

CSS:

.tabs-icon-top,
.tabs-icon-top .tab,
.tabs-icon-top .tab .nav-view-home {
    color: #c49137;
}

您还可以使用它来选择所有名称空间的选项卡:

.tabs-icon-top .tab {
    color: #c49137;
}

或者这个选择一个单独的选项卡:

.tabs-icon-top .nav-view-home {
    color: #c49137;
}