在tabs.html中
<ion-tabs tabsPlacement="bottom">
<ion-tab [root]="tab1Root" tabTitle="tab1" tabIcon="tab-tab1"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="tab2" tabIcon="tab-tab2"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="tab3" tabIcon="tab-tab3"></ion-tab>
</ion-tabs>
.ion-tab-icon-base {
width: 32px;
height: 32px;
padding: 4px 4px 2px;
}
.ion-tab-icon-md-base {
min-width: 0 !important;
height: 32px;
}
$tabImageName: 'tab1' 'tab2' 'tab3';
@for $i from 1 to 4 {
//for ios
.ion-ios-tab-#{nth($tabImageName, $i)} {
@extend .ion-tab-icon-base;
content: url("../assets/images/tabs/#{nth($tabImageName, $i)}_choosed.png");
}
.ion-ios-tab-#{nth($tabImageName, $i)}-outline {
@extend .ion-tab-icon-base;
content: url("../assets/images/tabs/#{nth($tabImageName, $i)}.png");
}
// for android
.tabs-md .tab-button[aria-selected=true] {
.ion-md-tab-#{nth($tabImageName, $i)} {
@extend .ion-tab-icon-md-base;
content: url("../assets/images/tabs/#{nth($tabImageName, $i)}_choosed.png");
}
}
.tabs-md .tab-button[aria-selected=false] {
.ion-md-tab-#{nth($tabImageName, $i)} {
@extend .ion-tab-icon-md-base;
content: url("../assets/images/tabs/#{nth($tabImageName, $i)}.png");
}
}
}
ios的比较简单,只要直接定义.ion-ios-tab-tabX以及.ion-ios-tab-tabX-outline即可。
android则需要设置.tabs-md .tab-button下不同属性的.ion-md-tab-tabX
其中,tabX表示tab1,tab2,tab3等,具体的名字根据自己喜好。
编译生成的css如下
.ion-ios-tab-tab1 {
content: url("../assets/images/tabs/tab1_choosed.png");
}
.ion-ios-tab-tab1-outline {
content: url("../assets/images/tabs/tab1.png");
}
.tabs-md .tab-button[aria-selected=true] .ion-md-tab-tab1 {
content: url("../assets/images/tabs/tab1_choosed.png");
}
.tabs-md .tab-button[aria-selected=false] .ion-md-tab-tab1 {
content: url("../assets/images/tabs/tab1.png");
}
以上样例所有图片均放在src/assets/images/tabs目录下,并以tabX.png和tabX_choosed.png命名。
如果亲们有更好的方法可以告知,谢谢!