离子标签背景颜色

Question

嗨， 我正在使用 Ionic 开发移动应用程序。我使用了离子标签模板。在屏幕底部，标签的背景仍然是白色的。我不知道如何改变背景。我只是用下面的代码改变图标的​​颜色。如何更改背景标签颜色。

<ion-tabs class="tabs-icon-top tabs-color-{{theme.primary}}" > 
      <ion-tab title="Cards" 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>
</ion-tabs>

Answer 1

我有同样的问题，但我没有得到任何有效的解决方案。

我在 app.scss 中的家庭解决方案：

.tabbar {
    background: red !important;
    color: #bbb !important;
    & .tab-button {
        color: #bbb !important;
        & .tab-button-icon {
            color: #bbb !important;

        }

    }
    & .tab-button[aria-selected=true]{
        // text-shadow: 1px 0px #eaeaea;
        color: white !important;
        & .tab-button-icon {
            text-shadow: 1px 0px #eaeaea;
            color: white !important;

        }
    }
}

Answer 2

你需要添加tabs-background-positive类

<ion-tabs class="tabs-icon-top tabs-color-{{theme.primary}} tabs-background-positive" > 
      <ion-tab title="Cards" 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>
</ion-tabs>

Answer 3

您也可以添加其他离子颜色类，例如 -

1. 浅白色
2. 稳定 - 浅灰色
3. 自信 - 红色
4. 平静 - 浅蓝色
5. 深黑色
6. 通电 - 黄色
7. 皇家 - 紫罗兰色
8. 平衡 - 绿色

只需将“tabs-background-positive”替换为上述选项即可。

Answer 4

有一个类似的问题，摆脱tabs-color-royal 中的color 以及 Aman 已经提供的选项就成功了！

<ion-tabs class="tabs-icon-top tabs-{{theme.primary}}">
  <ion-tab title="Cards" 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>
</ion-tabs>

选项：

• 皇家
• 光
• 稳定
• 果断
• 冷静
• 黑暗
• 精力充沛
• 平衡

Answer 5

ion-tab-bar, ion-tab-button{
  background-color: #320d99;
  color: #fff;
 }

 ion-icon{
   color: #ffffff;

 }

它有效...