我需要在离子2中使用带有标签的海关图标。
此外，如果选择了标签，我需要更改标题颜色和图标。
示例：
离子选项卡
这是我找到的最简单的方式，来自https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-My-own-svg-file/46131/36。
在您的 app.scss 文件中，添加以下代码：
ion-icon {
&[class*="custom-"] {
// Instead of using the font-based icons
// We're applying SVG masks
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 1em;
height: 1em;
}
// custom icons
&[class*="custom-icon1"] {
mask-image: url(../assets/img/customicon1.svg);
}
&[class*="custom-icon2"] {
mask-image: url(../assets/img/customicon2.svg);
}
&[class*="custom-icon3"] {
mask-image: url(../assets/img/customicon3.svg);
}
}
然后在模板中，您可以使用以下HTML创建图标：
<ion-icon class="custom-icon1"></ion-icon>
在其他问题中，人们建议一种基于字体的方法。尽管您不添加数百个图标，但使用该答案的使用远不那么复杂。注意的是，每个图像都是作为单独请求发送的，其中与字体方法一样，所有图像都包含在一个文件中，因此它将更有效。
3海关图标示例
SCSS文件
.tabbar, .tabs-ios, .tabs-md , .tabs-wp{
.tab-button-icon {
background-repeat:no-repeat;
background-position:center;
height:24px;
width:24px;
background-size:contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
&:before {
display:none;
}
}
}
.tabs-ios {
a[aria-selected=false]{
.tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
background-image: url(../assets/img/categories_inactive.png);
}
.tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
background-image: url(../assets/img/explore_inactive.png);
}
.tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
background-image: url(../assets/img/hot_inactive.png);
}
}
a[aria-selected=true] {
//führ eventuellen text
//span {
//color: #f00; //whatever colour you want to use for the text
//}
.tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
background-image: url(../assets/img/categories_active.png);
}
.tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
background-image: url(../assets/img/explore_active.png);
}
.tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
background-image: url(../assets/img/hot_active.png);
}
}
}
.tabs-md {
a[aria-selected=false]{
.tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
background-image: url(../assets/img/categories_inactive.png);
}
.tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
background-image: url(../assets/img/explore_inactive.png);
}
.tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
background-image: url(../assets/img/hot_inactive.png);
}
}
a[aria-selected=true] {
//führ eventuellen text
//span {
//color: #f00; //whatever colour you want to use for the text
//}
.tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
background-image: url(../assets/img/categories_active.png);
}
.tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
background-image: url(../assets/img/explore_active.png);
}
.tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
background-image: url(../assets/img/hot_active.png);
}
}
}
.tabs-wp {
a[aria-selected=false]{
.tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
background-image: url(../assets/img/categories_inactive.png);
}
.tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
background-image: url(../assets/img/explore_inactive.png);
}
.tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
background-image: url(../assets/img/hot_inactive.png);
}
}
a[aria-selected=true] {
//führ eventuellen text
//span {
//color: #f00; //whatever colour you want to use for the text
//}
.tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
background-image: url(../assets/img/categories_active.png);
}
.tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
background-image: url(../assets/img/explore_active.png);
}
.tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
background-image: url(../assets/img/hot_active.png);
}
}
}
html文件
<ion-tab [root]="tab2Root" tabIcon="categories"></ion-tab>
<ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
<ion-tab [root]="tab3Root" tabIcon="hot"></ion-tab>
source＆amp;更多详细信息：https：//forum.ionicframework.com/t/ionic2-tutorial-tabs-with-custom-actom-active-inactive-icons/75163
在此处查看离子2的tabs组件。
请参阅此信息，以使用自定义图标以及如何在选项卡上显示它们。
另外，我认为您可以通过.animate类更改标题和图标的CSS属性。
如果不是，则从浏览器窗口中检查元素，并找到选项卡时更改的类。您可以通过ionic serve在浏览器中运行您的项目。