如何更改离子应用程序中标签的颜色？

Question

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

目前我所在的标签是正面的，其余的标签是灰色的。

对于那些不熟悉 ionic 但又是 css 天才的人， ionic 有许多默认设置颜色，例如：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;
}

Answer 2

如果您使用的是 Sass，您只需将以下内容放入您的 CSS 文件中：

ion-tabs {
  @include tabs-standard-color('tabs-color-active-[custom name here]', 
   [main color], [color if not selected]);
}

这样您还可以避免覆盖现有样式，而只需创建一个自定义类。您还可以选择覆盖 $positive 以更改使用该颜色的每个元素。

---

我从 Sass 中获得了 CSS，它看起来并不漂亮，但它应该可以解决问题：

ion-tabs.tabs-color-active-custom .tab-item {
  color: [inactive color]; 
}

ion-tabs.tabs-color-active-custom .tab-item.tab-item-active, ion-tabs.tabs-color-active-custom .tab-item.active, ion-tabs.tabs-color-active-custom .tab-item.activated {
    color: [active color]; 
}

Answer 3

.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+ */
}