Question

我试图在离子3中制作彩色导航栏

，已经尝试过为每个离子标签使用样式但是它没有用，我也试过Overriding Ionic Sass Variables，我也没有成功。有人能帮助我吗？

谢谢

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，可能不是最佳解决方案，但解决了我的问题。

如何使离子3上的彩色标签

2 个答案: