手摸手带你入门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，感兴趣的可以看一下。