如何在 ionic 3 的选项卡按钮图标中添加自定义图像. [英] How to add custom image in tab-button-icon in ionic 3.
本文介绍了如何在 ionic 3 的选项卡按钮图标中添加自定义图像.的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想添加我自己的自定义图像来代替 ionic3 提供的默认图像.我是 Ionic 的新手,请帮助我.自 1 周以来一直在寻找解决方案.
I want to add my own custom images in place of default images provided by ionic3. I am new in Ionic please help me. Searching for solution since 1 week.
tabs.html
<ion-tabs [selectedIndex]="mySelectedIndex" name="conference">
<ion-tab [root]="tab1Root" tabsHideOnSubPages="false" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabsHideOnSubPages="false" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabsHideOnSubPages="false" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
tabs.ts
import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = AboutPage;
tab3Root = ContactPage;
mySelectedIndex: number;
constructor(navParams: NavParams) {
this.mySelectedIndex = navParams.data.tabIndex || 0;
}
}
推荐答案
我已经研究了将近 2 个小时.您可以简单地使用以下代码段.
I have been looking into this for almost 2 hours. You can simply use following snippet.
<ion-tab
[root]="tab1Root"
tabIcon="customicon">
</ion-tab>
ion-icon {
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
background-size: 18px;
&[ng-reflect-name="customicon"] {
background-image: url('../assets/images/<your-image>.inactive.png');
&[ng-reflect-is-active="true"] {
background-image: url('../assets/images/<your-image>.active.png');
}
}
}
这篇关于如何在 ionic 3 的选项卡按钮图标中添加自定义图像.的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文