离子标签文本颜色为活动和非活动标签设置不同答案

【问题标题】：Ionic tabs text color to be set differently for active and inactive tabs离子标签文本颜色为活动和非活动标签设置不同
【发布时间】：2017-03-02 01:59:38
【问题描述】：

我在我的应用程序中使用了 ionic 选项卡，我需要更改活动和非活动选项卡的选项卡图标标题颜色的颜色。我尝试了一些 CSS，但最终没有解决方案。选择时，我需要为每个选项卡标题使用不同的颜色。

【问题讨论】：

请将您的代码也发布在小提琴中，以便我们检查并尝试提供帮助。没有代码，我们无能为力。
请添加一些代码或显示您的代码的演示链接

标签： html css ionic-framework tabs

【解决方案1】：

一个简单的替代方案。

<!-- pages/tabs/tabs.html -->
<ion-tabs color="dark" tabsPlacement="top">
  <ion-tab [root]="tab1Root" tabTitle="Todo"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Plannificator"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Schedler"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="About"></ion-tab>
</ion-tabs>



// themes/variables.scss
.tabs-md .tab-button {
  color: #FFC400 !important;
 }

 .tabs-md .tab-button[aria-selected=true] {
   color: #DD2C00 !important;
 }

【讨论】：

【解决方案2】：

要在每个选项卡放置时获得不同的颜色，您需要在两个文件中进行更改。

您需要在 tabs.html 文件中添加一些自定义类，如下所示：

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

  <!-- Dashboard Tab -->
  <ion-tab title="Status" class="dash" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  <!-- Chats Tab -->
  <ion-tab title="Chats" class="chat" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
    <ion-nav-view name="tab-chats"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab title="Account" class="account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>


</ion-tabs>

在上面的代码中 class="dash"、class="chat" 和 class="account" 这些是额外添加的类。

现在在您的 /scss/ionic.app.scss 文件中，您需要输入以下提到的行：

.tab-item.dash.tab-item-active, .tab-item.dash.active, .tab-item.dash.activated {
    color: $energized !important;
}

.tab-item.chat.tab-item-active, .tab-item.chat.active, .tab-item.chat.activated {
    color: $balanced !important;
}

.tab-item.account.tab-item-active, .tab-item.account.active, .tab-item.account.activated {
    color: $calm !important;
}

希望对你有帮助！

【讨论】：