时间戳

首页 > 解决方案 > 在 Ionic 3 中为选项卡设置不同的颜色

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

问题描述

我正在使用 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>

真诚的，谢谢

标签： htmlionic-frameworksasstabsionic3

解决方案

您可以尝试为您的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 在顶部或底部动态创建此工具栏。

推荐阅读