学习混合开发语言,目的就是为了快速开发一个适用于多平台的app。
app基本都会有footer,也就是tabbar,用来快速导航不同的页面。
ionic也有这个组件,ion-tab。
常用方法如下:
@Component({
template: `
<ion-header>
<ion-navbar>
<ion-title>Tabs</ion-title>
</ion-navbar>
</ion-header>
<ion-content></ion-content>
`
})
class TabContentPage {
constructor() {}
} @Component({
template: `
<ion-tabs>
<ion-tab tabIcon="contact" [root]="tab1"></ion-tab>
<ion-tab tabIcon="compass" [root]="tab2"></ion-tab>
<ion-tab tabIcon="analytics" [root]="tab3"></ion-tab>
<ion-tab tabIcon="settings" [root]="tab4"></ion-tab>
</ion-tabs>`
})
export class TabsIconPage {
constructor() {
this.tab1 = TabContentPage;
this.tab2 = TabContentPage;
...
}
}
其中,<ion-tab tabIcon="contact" [root]="tab1"></ion-tab>代表其中一个tab按钮
tabIcon就是按钮的图标了,ionic自带的图标,我们只需要写图标的name就好了。
这个小例子中,ionic就会自动加上ion-[平台类型]-[图标name]-[选中或否],渲染到页面选中状态就是<ion-icon class='icon ion-ios-contact'></ion-icon>
如果是未选中就是<ion-icon class='icon ion-ios-contact-outline'></ion-icon>
找到规律了就好办了。
本例以iconfont为参考:
打开iconfont,
首先设置图标项目或者图标 的 前缀和字体样式,
1.前缀一定为 'ion'
2.字体样式为自定义,无所谓的
之后
设置图标(这里是选中状态)
这里为ios-图标名字或md-图标名字,也就是说 同一个图标,我们需要定义2套 名字不同,分别对应ios 和 android。
在这里我只定义ios
(这里是未选中状态)
按照上述,将所有的tab 所需的图标 设置好,就可以下载素材了。
选择 font class 下载到本地,你会拿到一个压缩包
选中这几个文件就够了,其他的都是demo。
放到项目的assets/fonts目录下,没有fonts的自己创建,
在app.scss里面引入iconfont.css后
就可以使用了,
tabIcon直接写图标中的name就好了,例如上面的workbench,它会自动补全。
除此之外,
还要在tab的样式中指定使用的字体,
.tab-button {
&>ion-icon {
font-family: "hec4_ng4_ionic3" !important;
/*指定在当前组件中的ion-icon使用的字体名称*/
}
}
如果想要改tab激活后的颜色
还要加上
$tab-color:这里自定义颜色
.tab-button[aria-selected=true] {
color: $tab-color!important;
.tab-button-icon {
color: $tab-color!important;
}
}
ion-tab自定义图标到这里就结束了
效果如下