小编J.S*_*oto的帖子

当 ion-tab-button 处于活动状态时,如何更改图标的颜色?CSS 离子

我正在使用 Ionic 4.12,我正在使用选项卡组件,并且我想在激活该选项卡时更改离子图标 svg 的颜色。我正在尝试更改 ion-tab-button 的 Shadow dom,如文档所示

--颜色选择

--以背景为中心

在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>
Run Code Online (Sandbox Code Playgroud)

图标的当前 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;
}
Run Code Online (Sandbox Code Playgroud)

html css ionic-framework

5
推荐指数
1
解决办法
2万
查看次数

标签 统计

css ×1

html ×1

ionic-framework ×1