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

Question

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

我要构建的菜单：

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

谢谢你。

Answer 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
);

Answer 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，也许不是最好的解决方案，但解决了我的问题。