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