离子选项卡背景颜色

Question

您好， 我正在使用Ionic开发移动应用程序。我使用了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. 平衡 - 绿色

只需更换＆＃34;标签 - 背景正面＆＃34;以上选项。

Answer 4

遇到类似的问题，摆脱color中的tabs-color-royal 以及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;

 }

有效...