阅读 928

手摸手带你入门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 就派上用场了,大家自行学习。

运行后界面如下: default

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

保存代码后,运行的界面如下: 1

全局样式

真实的项目通常会要求每个界面中某一组件的样式保持一致,比如说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>
复制代码

最后看下效果: 2

思考

假如app.scsshome.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,感兴趣的可以看一下。

关注下面的标签,发现更多相似文章
评论