Как я могу изменить цвет моего значка, когда активна кнопка ion-tab? Ионный CSS
Я использую Ионик 4.12 Я работаю с компонентом вкладки и хочу изменить цвет моего значка ion-icon svg, когда я активирую эту вкладку. Я пытаюсь изменить теневой дом кнопки ion-tab, как показано в документации с помощью
--color-selected
--фоновый фокус
в css, но это не меняет его
штрих-код вкладки
<ion-tab-bar slot = "bottom">
<ion-tab-button tab = "mainview">
<ion-icon src = "assets/logo/mainView.svg"></ion-icon>
<ion-label>INDICADORES</ion-label>
</ion-tab-button>
<ion-tab-button tab = "profile">
<ion-icon src = "assets/logo/profile.svg"></ion-icon>
<ion-label>PERFIL</ion-label>
</ion-tab-button>
<ion-tab-button tab = "">
<ion-icon src = "assets/logo/phone.svg"></ion-icon>
<ion-label>LLAMAR</ion-label>
</ion-tab-button>
<ion-tab-button tab = "caregivers">
<ion-icon src = "assets/logo/doc.svg"></ion-icon>
<ion-label>CUIDADORES</ion-label>
</ion-tab-button>
<ion-tab-button tab = "help">
<ion-icon src = "assets/logo/help.svg"></ion-icon>
<ion-label>AYUDA</ion-label>
</ion-tab-button>
текущий css иконок
ion-tab-button{
font-size: 10px;
--padding-end: 0px;
--padding-start: 10px;
--padding-bottom: 0px;
--margin-left:0px;
--margin-right:0px;
max-width:100px;
ion-icon{
font-size: 67.5px;
}
только что отредактировал, спасибо за наводку
какая у тебя ионная информация? Я попробовал ваш код, и он сработал, у меня тоже 4.12
Ответы 6
Если вы хотите задать другой цвет, когда класс активен, вы можете просто сделать следующее:
.class:active {
color: blue;
}
Однако в вашем случае это будет:
ion-tab-button:active{
color: blue;
}
Атрибут цвета также работает с шестнадцатеричными и RGB-кодами. (подробнее см. https://www.w3schools.com/cssref/css_colors_legal.asp)
Я также рекомендую проверить этот пост, так как он связан с проблемой, с которой вы столкнулись в данный момент. Редактирование стилей значков вкладки Ionic
ion-tab-button{
font-size: 10px;
--background-focused: #a0a;
--color-selected: #a0a;
--padding-end: 0px;
--padding-start: 10px;
--padding-bottom: 0px;
--margin-left:0px;
--margin-right:0px;
max-width:100px;
ion-icon{
font-size: 67.5px;
}}
это правильный ионный способ
Я использовал его без важного значения, поэтому по какой-то причине он не работал, теперь он работает ионным способом, спасибо.
Это приведенный ниже CSS, нам нужно добавить его в CSS уровня компонента, если нам нужно применить стили только к конкретной странице.
Используя псевдокласс фокуса, мы можем применить стиль к выбранной кнопке ion-tab.
ion-tab-button:focus {
ion-icon, ion-label {
color: var(--ion-color-primary) !important;
--ion-color-base: var(--ion-color-primary) !important;
}
}
Вы можете предоставить пользовательский css для выбранной вкладки. Всякий раз, когда вы выбираете вкладку, класс «выбранный вкладкой» добавляется в кнопку ion-tab-button.
.tab-selected {
border-bottom: 5px solid blue;
}
Есть еще один способ настроить вкладки в ionic. (моя ионная версия 6.12.0)
ion-tab-bar{
background-color: white;
overflow-x: auto;
border:0px;
}
ion-tab-bar > ion-tab-button {
border-radius: 20px 20px 20px 20px;
}
ion-tab-button[aria-selected=true] {
color:white;
background-color: #3689ef;
}
ion-tab-bar ion-tab-button[aria-selected=true]:first-child {
border-radius: 0px 20px 20px 0px;
}
ion-tab-bar ion-tab-button[aria-selected=true]:last-child {
border-radius: 20px 0px 0px 20px;
}
Это гораздо сложнее понять, чем должно быть, но вот что сработало для меня:
In theme/variables.css
:root {
/*put at the bottom after all other base styles*/
--ion-tab-bar-color: #2a3042;
--ion-tab-bar-color-selected: #556ee6;
}
не могли бы добавить свой код вкладки?