溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、準備資源
tabs icon 的svg格式的矢量圖片
二、生成字體樣式文件
打開icoMoon網站去制作字體文件。
三、使用字體文件
解壓下載的文件，將其中的fonts文件夾拷貝到ionic2項目的src/assest目錄下。并且將其目錄下的styles.css文件命名為wecare.scss(這個名稱是你字體的文件名稱)，再將其拷貝到ionic2項目的src/assest/fonts目錄下。下來我們去修改wecare.scss文件。
修改@font-face中的引用地址。
$font-path: '../assets/fonts';
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'wecare';
src: url('#{$font-path}/wecare.eot?l80w4l');
src: url('#{$font-path}/wecare.eot?l80w4l#iefix') format('embedded-opentype'),
url('#{$font-path}/wecare.ttf?l80w4l') format('truetype'),
url('#{$font-path}/wecare.woff?l80w4l') format('woff'),
url('#{$font-path}/wecare.svg?l80w4l#wecare') format('svg');
}
修改字體的公共樣式部分的選擇器
原代碼
[class^="ion-"], [class*=" ion-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'wecare' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
修改后
.wecare {
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'wecare' !important;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
speak: none;
}
.ion-ios-smart-outline:before,
.ion-ios-smart:before,
.ion-md-smart-outline:before,
.ion-md-smart:before,
.ion-ios-test-outline:before,
.ion-ios-test:before,
.ion-md-test-outline:before,
.ion-md-test:before {
@extend .wecare;
}
注：將一個通用的選擇器改為一個類，然后讓被應用的類去繼承，是因為使用[class^="ion-"], [class*=" ion-"] 來選擇時會影響到ionic2自帶的圖標庫，這也是ionic2字體庫的寫法。
字體的引用
.ion-ios-smart-outline:before {
content: '\e904';
}
.ion-ios-smart:before {
content: '\e905';
}
.ion-md-smart-outline:before {
content: '\e904';
}
.ion-md-smart:before {
content: '\e905';
}
.ion-ios-test-outline:before {
content: '\e900';
}
.ion-ios-test:before {
content: '\e901';
}
.ion-md-test-outline:before {
content: '\e900';
}
.ion-md-test:before {
content: '\e901';
}
注：在ionic2中引用圖標主要靠名稱來引用，它會根據Platform自動添加前綴如ios或android(.ion-ios-smart.ion-md-smart)，所以我們必須為ios與android各寫一個類名，其中像.ion-ios-test-outline這種是tab未被選中時的樣式。
將我們的sass文件導入src/theme/variables.scss ，然后就可以在tabs中使用了。
@import '../assets/fonts/wecare'; <ion-tabs> <ion-tab [root]="tab1Root" tabTitle="Now" tabIcon="test"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="Assessment" tabIcon="information-circle"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="Trends" tabIcon="contacts"></ion-tab> <ion-tab [root]="tab4Root" tabTitle="Smart" tabIcon="smart"></ion-tab> <ion-tab [root]="tab5Root" tabTitle="Settings" tabIcon="contacts"></ion-tab> </ion-tabs>
四、解決android中icon只能使用一張icon的問題
在ionic2中android的tab圖標選中與未選中只能使用一張svg圖片，只是顏色不同。如果我們想要像在ios中一樣選中與未選中使用不同的icon，就不能辦到。我們的項目的需求就是這樣，我不得已只能去看ionic2關于tabs與tab的源碼，找到解決問題的方法。我們應該知道在ios中它是通過-outline的后綴來控制顯示未選中的icon。起初我看了tabs與tab的源碼，沒有找到關于這個問題的部分。最后在icon的源碼中找到了關于這個問題的部分代碼。
if (iconMode === 'ios' && !this._isActive && name.indexOf('logo-') < 0 && name.indexOf('-outline') < 0) {
name += '-outline';
}
它是判斷是否是ios與 !this._isActive時給icon的name添加-outline后綴。但是我們也不能去改源碼，因為如果以后升級會覆蓋。
但是天無絕人之路，在tab的api中提供了一個被選中時調用的方法，我們通過這個方法來改變icon。下面是代碼
<ion-tabs>
<ion-tab [root]="tab1Root" (ionSelect)="change(0)" tabTitle="Now" tabIcon="{{test[0]}}"></ion-tab>
<ion-tab [root]="tab2Root" (ionSelect)="change(1)" tabTitle="Assessment" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" (ionSelect)="change(2)" tabTitle="Trends" tabIcon="contacts"></ion-tab>
<ion-tab [root]="tab4Root" (ionSelect)="change(3)" tabTitle="Smart" tabIcon="{{test[3]}}"></ion-tab>
<ion-tab [root]="tab5Root" (ionSelect)="change(4)" tabTitle="Settings" tabIcon="contacts"></ion-tab>
</ion-tabs>
test: Array<string> = ["test", "", "", "smart", ""];
change(a: number) {
if (this.platform.is("android")) {
for (let i = 0; i < 5; i++) {
if (i === a) {
this.test[i] = this.test[i].split("-")[0];
} else {
this.test[i] = this.test[i].split("-")[0] + "-outline";
}
}
}
}
五、最后來看一下效果
以上所述是小編給大家介紹的ionic2 tabs 圖標自定義實例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
