启用离子标签按钮后，如何更改图标的颜色？ CSS离子

Question

我正在使用Ionic 4.12 我正在使用标签组件，我想在激活该标签时更改离子图标svg的颜色。 我正在尝试更改离子标签按钮的阴影区域，如文档所示

-已选择颜色

-以背景为重点

在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;
}

Answer 1

如果您想在课堂上课时给另一种颜色，您可以执行以下操作：

.class:active {
    color: blue; 
}

但是在您的情况下，这将是：

ion-tab-button:active{
    color: blue;
}

颜色属性也适用于十六进制和RGB代码 （有关更多信息，请参见https://www.w3schools.com/cssref/css_colors_legal.asp）

我也建议您检查此帖子，因为这与您当前遇到的问题有关。 Editing Ionic tab icon styles

Answer 2

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;
}}

这是正确的离子方式

Answer 3

这是下面的CSS，如果仅需要将样式应用于特定页面，则需要在组件级CSS中添加它。

使用focus伪类，我们可以将样式应用于所选的ion-tab按钮

ion-tab-button:focus {
    ion-icon, ion-label {
        color: var(--ion-color-primary) !important;
        --ion-color-base: var(--ion-color-primary) !important;
    }
}

Answer 4

您可以将自定义CSS提供给选定的选项卡。只要您选择选项卡，“选项卡选择”类就会添加到离子选项卡按钮中。

.tab-selected {
  border-bottom: 5px solid blue;
}

Answer 5

还有另一种自定义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;
 }

Answer 6

这比应该的更难弄清楚，但以下是对我有用的方法：

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;

}