Question

我正在使用Ionic 3开发应用程序。

我的应用程序底部有标签。

问题是，我希望每个选项卡都具有不同的颜色，但是我无法通过SCSS表实现它。我只能更改整个栏的颜色，而不能通过覆盖SCSS变量来选择每个标签。

有人知道怎么做吗？

这是我的HTML。

<ion-tabs selectedIndex="0" >

<ion-tab className="fontSizeText" [root]="homeRoot" tabTitle="Scanner un code" tabIcon="camera"></ion-tab>
<ion-tab [root]="productRoot" tabTitle="Produits" tabIcon="basket"></ion-tab>
<ion-tab className="fontSizeText" [root]="informationRoot" tabTitle="Sensibilisation" tabIcon="leaf"></ion-tab>
<ion-tab [root]="accountRoot" tabTitle="Mon Compte" tabIcon="build"></ion-tab>

</ion-tabs>

此致，谢谢

Answer 1

您可以尝试为ion-tabs元素提供任何标识符，例如类或ID。然后，您可以像这样通过CSS访问标签：

ion-tabs.yourClass {
    .tabbar {
        a.tab-button {
            &:nth-child(1) {
                background-color: black;
            }
            &:nth-child(2) {
                background-color: black;
            }
            ...
        }
    }
}

这不是最漂亮的解决方案，但这是我知道的访问单个Tab元素的唯一方法。

问题是，当您将任何class放在ion-tab元素上时，它将被添加到ion-tab而不是链接上。 Ionic在顶部或底部动态创建此工具栏。

在Ionic 3中为标签设置不同的颜色

1 个答案: