手摸手帶你入門ionic3(五)：樣式綁定

上一篇講了數據綁定和事件綁定，這一篇該講如何美化下咱們的界面了，打算分爲class綁定，style綁定和全局樣式三個部分來說。此篇全部的代碼在上一篇的代碼基礎上添加。開始以前用編輯器打開awsomeProject，經過ionic serve命令運行項目

class綁定

ionic 樣式使用的是scss，它是成熟穩定的CSS拓展語言，具體的用法你們能夠本身去學習下。這裏就不討論了。home.html對應的樣式文件固然是在home.scss中啦。修改home.scss代碼以下：

home.scss

page-home {
    .alert{
     color:red
    }
}
複製代碼

須要注意的是包裹在page.home中的樣式只能夠在home.html中起做用，ionic自動將兩者綁定，page-home對應的就是home.ts中的selector。

而後在home.html中修改代碼以下（未說起代碼不變，以...表示）:

home.html
...
<ion-content>

<p class="alert">{{2+3}}</p>
...
<p [class.alert]="isShown" *ngIf="isShown">看獲得我</p>
...

</ion-content>
複製代碼

第一個是常見的用法，第二個就是Angular的語法了，經過 [class.class類名字]="模板表達式" 這樣的用法，動態的添加和刪除一個class類名，當模板表達式計算結果爲true時，會添加。 拓展：假如我在同一標籤上有多個類名須要動態的計算後添加或者刪除，相似<p [class.alert]="isShown" [class.special]="isSpecial" [class.best]="isBest">{{2+3}}</p>，太多的話，寫起來很很差看。這個時候 ngClass 就派上用場了，你們自行學習。

運行後界面以下：

style綁定

一般咱們會遇到只修改標籤的某一特定樣式的需求，好比說點擊以後字體變大，背景顏色改變等等，這個時候就須要style綁定了。修改home.html中的代碼以下：

home.html

...
<p class="alert" [style.background]="isShown?'black':'blue'">{{2+3}}</p>
...
<p *ngIf="names.length>0" [style.font-size.em]="isShown ? 2 : 1">下面是數組，長度爲{{names.length}}</p>
...
複製代碼

從上面的代碼看出，咱們能夠經過[style.css樣式屬性名]="模板表達式"這樣的方法來動態改變某一具體的樣式屬性。假如屬性還有單位的話，能夠參考第二個例子。 拓展:假如我有多個樣式屬性須要動態的添加，相似<p [style.background]="isShown?'black':'blue'" [style.color]="isShown?'red':'green'" >首頁</p>，這個時候，你能夠考慮ngStyle

保存代碼後，運行的界面以下：

全局樣式

真實的項目一般會要求每一個界面中某一組件的樣式保持一致，好比說Button按鈕正常狀態下是藍底白字，假如每一個界面對應的scss文件都要寫一份，無疑是吃力不討好，如何只寫一次全部的界面都遵循同樣的樣式呢？這個時候src/app/app.scss文件就出場了。在文件的最後面添加代碼以下：

app.scss

.btn-primary{
   background: powderblue;
   color: white;
}
複製代碼

而後在home.html中修改代碼以下：

home.html

...
<button  class="btn-primary"  (click)="onChangeTitle()">點擊</button>
複製代碼

最後看下效果：

思考

假如app.scss和home.scss有一個一樣的類名叫title，樣式分別以下：

app.scss

.title{
   color:red
}
複製代碼

home.scss

.title{
    color:blue
}
複製代碼

而home.html中有一標籤以下：

home.html

<h1 class="title"> 猜猜我是什麼顏色 <h1>
複製代碼

問題就在代碼中，答案請本身去試下吧。

後記

本人在寫一個ionic入門的教學手冊 ionic3-handbook，還有一個基於真實項目的ionic項目HW-basic，感興趣的能夠看一下。