我正在开发一个主要导航方法是选项卡的 Ionic 元素。中心选项卡需要突出显示,所以我在 scss 中创建了这样的样式:
i.icon.ion-ios-camera {
height: inherit;
border-radius: 100em;
background-color: #ff5b38;
}
我这样做的方式与我在 ionic serve
时做烧烤的方式相同。 'ing 和检查,我发现我的标签:
<ion-tab title="Post" icon="ion-ios-camera" href="#/home/post">
<ion-nav-view name="tab6"></ion-nav-view>
</ion-tab>
编译为:
所以我只想为编译后的图标创建一个样式(我只想为选项卡图标设置样式,而不是为整个选项卡设置样式)。奇怪的是,这不起作用。但是,检查该元素并添加这样的样式是可行的:
最终结果应该是这样的:
但我只能直接编辑<i>
来实现那些样式在检查器中标记。我上面发布的样式(在 ionic.app.scss 文件中)不会修改图标样式。难道我做错了什么?我的样式是否未正确编译?
最佳答案
经过大量研究,我找到了实际的解决方案,只需添加您的风格
对于安卓:
如果您更改 Inactive 图标,则更新为 false。
.tabs-md .tab-button[aria-selected=true] .tab-button-icon {
color: 'my-brand-color';
}
关于css - 编辑 Ionic 选项卡图标样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36877814/