ionic2 使用自定义图片作为tabbar的icon

最新推荐文章于 2024-04-26 00:00:00 发布

原创最新推荐文章于 2024-04-26 00:00:00 发布 · 6.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ionic2 #angular2 #cordova

ionic 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在Ionic项目中自定义Tab栏图标，包括为不同状态选择不同的图标样式及实现跨平台(iOS与Android)的适配。

在tabs.html中

<ion-tabs tabsPlacement="bottom">
  <ion-tab [root]="tab1Root" tabTitle="tab1" tabIcon="tab-tab1"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="tab2" tabIcon="tab-tab2"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="tab3" tabIcon="tab-tab3"></ion-tab>
</ion-tabs>

添加tabs.scss，并在其中定义如下

.ion-tab-icon-base {
  width: 32px;
  height: 32px;
  padding: 4px 4px 2px;
}

.ion-tab-icon-md-base {
  min-width: 0 !important;
  height: 32px;
}

$tabImageName: 'tab1' 'tab2' 'tab3';
@for $i from 1 to 4 {
  //for ios
  .ion-ios-tab-#{nth($tabImageName, $i)} {
    @extend .ion-tab-icon-base;
    content: url("../assets/images/tabs/#{nth($tabImageName, $i)}_choosed.png");
  }
  .ion-ios-tab-#{nth($tabImageName, $i)}-outline {
    @extend .ion-tab-icon-base;
    content: url("../assets/images/tabs/#{nth($tabImageName, $i)}.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/#{nth($tabImageName, $i)}_choosed.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/#{nth($tabImageName, $i)}.png");
    }
  }
}

ios的比较简单，只要直接定义.ion-ios-tab-tabX以及.ion-ios-tab-tabX-outline即可。

android则需要设置.tabs-md .tab-button下不同属性的.ion-md-tab-tabX

其中，tabX表示tab1，tab2，tab3等，具体的名字根据自己喜好。

编译生成的css如下

.ion-ios-tab-tab1 {
  content: url("../assets/images/tabs/tab1_choosed.png");
}

.ion-ios-tab-tab1-outline {
  content: url("../assets/images/tabs/tab1.png");
}

.tabs-md .tab-button[aria-selected=true] .ion-md-tab-tab1 {
  content: url("../assets/images/tabs/tab1_choosed.png");
}

.tabs-md .tab-button[aria-selected=false] .ion-md-tab-tab1 {
  content: url("../assets/images/tabs/tab1.png");
}

以上样例所有图片均放在src/assets/images/tabs目录下，并以tabX.png和tabX_choosed.png命名。

如果亲们有更好的方法可以告知，谢谢！