在 Ionic 3 中为选项卡设置不同的颜色

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 在顶部或底部动态创建此工具栏。