ionic3-ng4學習見聞--(自定義ion-tab圖標)

學習混合開發語言，目的就是為了快速開發一個適用於多平台的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自定義圖標到這里就結束了

效果如下