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

Posted 2023-03-06

【中文标题】如何在 Ionic 4 中更改标签栏和标签图标的背景颜色

【英文标题】：How to change the background color of tab bar and tab icon in Ionic 4

【发布时间】：2019-04-06 11:14:56

【问题描述】：

我想知道如何将此标签栏的背景颜色更改为 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 非常好奇 :( 请帮助...

【问题讨论】：

您是否覆盖了变量？ ionicframework.com/docs/theming/overriding-ionic-variables

【参考方案1】：

离子 4+

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


ion-icon
  color: #d7d8da;

【参考方案2】：

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

主要 次要 三级

更多信息documentation

示例用法：

<ion-tabs main color="primary">

【参考方案3】：

给ion-tab一个类名，比如

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

现在在 scss 文件中为名为 tab 的类提供背景颜色

.tab
   background-color: white;

【讨论】：

比如说你在主页上工作，它会有一个 home.scss 文件，你必须在其中对 home.html（前端）进行样式编辑