Установка разных цветов для вкладок в Ionic 3 - PullRequest
Новая
       6

Установка разных цветов для вкладок в Ionic 3

0 голосов
/ 25 декабря 2018

Я занимаюсь разработкой приложения с использованием 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>

С уважением, спасибо

1 Ответ

0 голосов
/ 25 декабря 2018

Вы можете попытаться присвоить элементу ion-tabs любой идентификатор, например, класс или идентификатор.Затем вы можете получить доступ к своим вкладкам через 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 динамически создает эту панель инструментов вверху или внизу.

...