如何在 Ionic 3 上制作彩色标签？

【问题标题】：How make um colorful tabs on Ionic 3?如何在 Ionic 3 上制作彩色标签？
【发布时间】：2020-05-02 03:56:02
【问题描述】：

我正在尝试在 Ionic 3 中制作彩色导航栏。

我要构建的菜单：

我已经尝试为每个ion-tab 使用样式，但它不起作用，我还尝试了覆盖 Ionic Sass 变量，我也没有成功。有人可以帮我吗？

谢谢。

【问题讨论】：

【解决方案1】：

You can give a different color to tab like this.
<ion-tabs>
      <ion-tab color="primary"></ion-tab>
      <ion-tab color="secondary"></ion-tab>
</ion-tabs>

Declare a color in theme/variables.scss
Like :

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

【讨论】：

【解决方案2】：

我检查生成的 HTML 并在 variables.scss 上编码：

.tab-button.icon-only#tab-t0-0{
  background-color: #fcaf17;
}

.tab-button.icon-only#tab-t0-1{
  background-color: #f37043;
}

.tab-button.icon-only#tab-t0-2{
  background-color: #ef4056;
}

.tab-button.icon-only#tab-t0-3{
  background-color: #46c3e6;
}

.tab-button.icon-only#tab-t0-4{
  background-color: #88c240;
}

$tabs-md-tab-icon-color : #FFFFFF;
$tabs-md-tab-icon-color-active : #272525;

其中tab-t0-x是tab x的id，可能不是最好的解决方案，但是解决了我的问题。

【讨论】：