tabs.scss
.ion-tab-icon-base {
width: 30px !important;
height: 30px !important;
}
.ion-tab-icon-md-base {
min-width: 0 !important;
height: 30px;
}
$tabImageName: 'model' 'shop' ;
@for $i from 1 to 3 {
//for ios
.ion-ios-tab-#{nth($tabImageName, $i)} {
@extend .ion-tab-icon-base;
content: url("../../assets/images/tabs/icon_#{nth($tabImageName, $i)}_on.png");
}
.ion-ios-tab-#{nth($tabImageName, $i)}-outline {
@extend .ion-tab-icon-base;
content: url("../../assets/images/tabs/icon_#{nth($tabImageName, $i)}_off.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/icon_#{nth($tabImageName, $i)}_on.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/icon_#{nth($tabImageName, $i)}_off.png");
}
}
}
//图标文字样式可以自行调整
使用了scss的语法,定义$tabImageName: 'model' 'shop' ;数组,然后循环,通过#{nth($tabImageName, $i)} 取出循环的每个元素,定义每个图标的样式,这个就是scss预编译样式的好处,省去重复的工作和重复的代码。
从样式代码可以看出,定义了两份代码,一份是ios的ion-ios-
前缀,一份是android版本的ion-md-
与.tabs-md
前缀,还有这个是ionic对不同平台有不同的样式,如果了解一看就明白了。-outline
为ios未选中样式,[aria-selected=false]
为android未选中样式。
tabs.html
<ion-tabs #myTabs>
<ion-tab [root]="modelRoot" tabTitle="比价" tabIcon="tab-model"></ion-tab>
<ion-tab [root]="shopRoot" tabTitle="直营店" tabIcon="tab-shop"></ion-tab>
<ion-tab [root]="homeRoot" tabTitle="首页" tabIcon="home"></ion-tab> <!-- ionic自带的 -->
</ion-tabs>