ionic 的 tabs 组件默认图标更换方式可以通过自定义图标样式来替换。自定义图标可以是图标字体库,也可以是png图标等。
可以在 tabs.scss
文件或者全局 app.scss
文件定义都行。下边是在 app.scss
中定义代码:
.ion-tab-icon-base {
width: 32px !important;
height: 32px !important;
padding: 4px 4px 2px;
}
.ion-tab-icon-md-base {
min-width: 0 !important;
height: 32px;
}
$tabImageName: 'home' 'about' 'contact';
@for $i from 1 to 4 {
//for ios
.ion-ios-tab-#{nth($tabImageName, $i)} {
@extend .ion-tab-icon-base;
content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_on.png");
}
.ion-ios-tab-#{nth($tabImageName, $i)}-outline {
@extend .ion-tab-icon-base;
content: url("../../assets/ui/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/ui/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/ui/tabs/icon_#{nth($tabImageName, $i)}_off.png");
}
}
}
.ion-ios-tab-task,.ion-ios-tab-task-outline,.ion-ios-tab-master,.ion-ios-tab-master-outline{
width: 30px !important;
height: 32px !important;
}
使用 scss
的语法,定义数组 $tabImageName: 'home' 'about' 'contact';
,然后通过循环 #{nth($tabImageName, $i)}
取出每个元素,定义每个图标的样式,这个就是 scss
预编译样式的好处,省去重复的内容。
从样式代码可以看出,定义了两份代码,一份是 ios 的 ion-ios-
前缀,一份是 android 的 ion-md-
与 .tabs-md
前缀,这个是 ionic 对不同平台有不同的样式处理,如果了解一看就明白了。-outline
为 ios 未选中样式,[aria-selected=false]
为 android 未选中样式。
接着修改 tabs.html
文件,修改 tabIcon
为样式表中定义的图标即可。(上面样式图标统一添加了前缀 tab-
,为了和自带图标区分开来)
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="tab-home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="tab-about"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="tab-contact"></ion-tab>
</ion-tabs>
图标目录结构如下:
网友评论