html - Ionic 选项卡文本颜色为事件和非事件选项卡设置不同

Question

我在我的应用程序中使用了 ionic 选项卡，我需要更改事件和非事件选项卡的选项卡图标标题颜色的颜色。我尝试了一些 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;
 }