对于活动和非活动选项卡，离散选项卡文本颜色的设置方式不同

Question

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

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

Answer 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 =＆＃34; dash＆＃34; ， class =＆＃34; chat＆＃34; 和 class =＆＃34 ; account＆＃34; 这些是额外添加的类。

现在在 /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;
}

希望这会对你有帮助！