如何在离子3中的tab-button-icon中添加自定义图像。 [英] How to add custom image in tab-button-icon in 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

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');
            }
        }
}

这篇关于如何在离子3中的tab-button-icon中添加自定义图像。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！