Как установить разный цвет для каждой активной вкладки в Ionic
Мне нужно установить цвет для активной вкладки в Ionic, как для значка, так и для текста. Проблема заключается в цвете: он разный для каждой вкладки, т.е. вкладка 1 имеет "красный" цвет, если активна, вкладка 2 имеет цвет "зеленый" и т. д. В CSS я написал правило:
.tab-button[aria-selected = "true"] {
color: color($colors, title-orders);
ion-icon {
background: color($colors, title-orders);
}
.tab-button-text {
color: color($colors, title-orders);
}
Есть тег <a>, который имеет значение [aria-selected = "true"] и 2 дочерних элемента: <ion-icon> и <span>. Тег <ion-icon> имеет значок определенного класса, например, custom-декреты, поэтому я могу использовать правило, чтобы изменить цвет значка на нужный мне цвет. Но текст находится в теге <span>, поэтому я не могу изменить его цвет в CSS.
Как я могу изменить цвет цветов <ion-icon> и <span> в зависимости от условия? Это соседние элементы.
Насколько я знаю, CSS-способа для этого нет. Кроме того, из-за некоторой магии в Ionic я не могу установить определенный класс для вкладки в HTML - добавленный класс не появляется там, где мне нужно - он появляется намного позже.
Как это сделать в Angular с помощью JavaScript?
UPD: Сделано с помощью SCSS. Пример выглядит так:
ion-icon[ng-reflect-name = "custom-orders"] {background: color($colors, title-orders);} ion-icon[ng-reflect-name = "custom-orders"] + span {color: color($colors, title-orders);}
Ответы 1
Вы можете попробовать прямой дочерний селектор>, чтобы выбрать элементы ion-icon, которые являются прямыми потомками элемента a, с помощью селектор соседних братьев и сестер+, чтобы выбрать элементы span, которые идут сразу после этого ion-icon:
a > ion-icon + span{
...
}
В качестве альтернативы вы можете просто использовать a > span {...} для выбора всех элементов span, которые являются прямыми дочерними элементами элементов a, если внутри них больше ничего нет.
Что касается добавления классов к вкладкам, я начал новый проект «вкладок» с ionic, и я вижу html для раздела вкладок в src/pages/tabs/tabs.html, где у него даже есть селектор цвета, поэтому я предполагаю, что вы можете добавить определенные классы на вкладки там? Вы также можете взглянуть на src/theme/variables.css, чтобы увидеть, какая глобальная тема используется, если вам нужны большие изменения палитры.
Обновлено: наконец, вы можете использовать nth-ребенок () в сочетании с предыдущими инструментами, чтобы настроить таргетинг на каждый другой tab и изменить css любого из его дочерних элементов, например, как показано в эта рабочий пример, где щелчок по каждой строке изменит значение aria-selected, но каждый диапазон будет получить другой цвет.
В моем приложении пока есть 5 вкладок, каждая из которых генерируется как <a> > <ion-icon> + <span>. И активная вкладка имеет значение [aria-selected = "true"], а 4 другие вкладки имеют значение [aria-selected = "false"]. Вот как я могу обнаружить активную вкладку. Это не проблема. А здесь я могу изменить цвет активной вкладки. Но я могу установить цвет для ЛЮБОЙ активной вкладки, какой бы она ни была - первой, второй или последней. И я могу изменить цвет в CSS на активный или использовать через переменную в variables.scss. Но я не могу сказать «1-й активный цвет - красный, 2-й - синий и т. д.».
И это именно то, что мне нужно - если активна 1-я вкладка - она должна быть голубого цвета (и значок, и текст), если активна 2-я вкладка - она должна быть фиолетовой. Цвета взяты со страниц. Так что тег <a> мог быть активным или нет. Это первый момент. Второй момент я должен проверить - какая вкладка активна. Тег <ion-icon> имеет класс custom-orders или custom-decree. Если есть, например, custom-orders - тогда цвет нужно установить на какое-то значение как для <ion-icon>, так и для <span>. Здесь я застрял на весь день.
Как насчет использования nth-ребенок () для установки CSS для каждой активной вкладки?
Проверьте эта рабочий пример, я обновлю ответ, если это то, что вам нужно. Вы можете стереть свойство «aria-selected = true» и увидеть, как исчезнет окраска.
Дорогой друг! Я очень старался и наконец получил ответ. Я использовал ion-icon[name] {color}, чтобы установить цвет значка, и ion-icon[name] + span {color}, чтобы установить цвет текста сразу после значка. Так что теперь все работает нормально! Спасибо большое, вы меня спасли!
О, это обходной путь! Я добавлю то, что я связал последним, для полноты, удачи!
Да, я знаю. Попробую объяснить свою проблему: