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

Question

我希望将选项卡的活动颜色更改为自定义颜色。如果可能的话，我还想更改图标的颜色。

目前我所在的选项卡是正色，其余选项卡是灰色的。

对于那些不熟悉 ionic 但却是 CSS 天才的人，ionic 有许多默认设置颜色，例如：positive=blue，assertive=red。

这是我到目前为止所拥有的：

标签.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 代码和声明，但这没有什么区别。

原文由 Michael 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Clomp 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

.tabs-md .tabbar {
    background: #00c6ff;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0072ff, #00c6ff);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0072ff, #00c6ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

原文由 Kuldeep Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议