如何在 Ionic 4 中更改选项卡栏和选项卡图标的背景颜色

Question

我想知道如何将此标签栏的背景颜色更改为 Ionic 4。

我试图在 ion-tab/ion-tabs 中添加 --background: white; 但它不起作用。

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

我对这个新的 Ionic 4 很好奇 :( 请帮忙...

Answer 1

给 ion-tab 起一个 class 名字，比如

<ion-tab class="tab"></ion-tab>

现在在 scss 文件中为 class 命名选项卡提供背景颜色

.tab{
   background-color: white;
}

Answer 2

您需要添加名为颜色的属性。 Ionic 4 具有预定义的颜色：

小学
中学
大专

更多信息见documentation

示例用法：

<ion-tabs main color="primary">

Answer 3

离子 4+

ion-tab-bar, ion-tab-button{
 background-color: #ce0013;
}

ion-icon{
  color: #d7d8da;
}

如何在 Ionic 4 中更改选项卡栏和选项卡图标的背景颜色

How to change the background color of tab bar and tab icon in Ionic 4

css

sass

ionic-framework

ionic4