Fork me on GitHub
tc9011's

AngularJS2中一种button切换效果的实现(一)

201612084134528591.jpg

最近在AngularJS2中要实现一个按钮切换的效果,我采用三目表达式和ng-class的方式来实现了这一效果,比较简单粗暴。

首先,我的项目的XX.Component.ts中的template有个button标签:

1
2
<button type="submit">列表</button>
<button type="submit">折线图</button>

创建XX.Component.css,为标签添加简单的样式(我只是举个例子,这个样式的定义还可以再优化一下):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.active {
color: #fff;
border: 1px solid transparent;
border-radius: 4px;
background-color: #0086FD;
padding: 5px;
outline: none;
width: 55px;
}
.btn-lt {
color: #fff;
border: 1px solid transparent;
border-radius: 4px;
background-color: gray;
padding: 5px;
outline: none;
width: 55px;
}

然后我需要实现的效果是:加载完页面后,两个按钮都是灰色的,当你点击其中一个按钮时,按钮变成蓝色。

为了实现这个效果,我引入了begin和blue两个变量,分别控制起始状态和点击时的状态。当blue为true且begin===1时按钮变蓝色;当blue为false时或者begin!= 1时按钮变灰色。代码如下:

1
2
<button [class]="begin === 1 && blue?'active':'btn-lt'" type="submit" (click)="blue=true;begin=1">列表</button>
<button [class]="begin === 1 && !blue?'active':'btn-lt'" type="submit" (click)="blue=false;begin=1">折线图</button>

完成后的效果如下:

20161208707272016-12-08_23-05-30.gif

这个方法还可以组合出其他不同的效果,比如说点击后当前按钮变灰:

1
2
<button [class]="begin === 1 && blue?'active':'btn-lt'" type="submit" (click)="blue=false;begin=1">列表</button>
<button [class]="begin === 1 && !blue?'active':'btn-lt'" type="submit" (click)="blue=true;begin=1">折线图</button>

完成后的效果如下:

20161208367222016-12-08_23-14-49.gif

比如把begin去掉,可以实现加载完成后有一个按钮处于激活状态,这里我就不做gif了,可以自己尝试一下。

tc9011 wechat
欢迎订阅我的微信公众号
坚持原创技术分享,您的支持将鼓励我继续创作!
------ 本文结束 ------

版权声明

tc9011's Notes by Cheng Tang is licensed under a Creative Commons BY-NC-ND 4.0 International License.
汤诚创作并维护的tc9011's Notes博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
本文首发于tc9011's Notes 博客( http://tc9011.com ),版权所有,侵权必究。