在Ionic中实现悬浮按钮效果

最近想要在Ionic中实现安卓新设计理念Material Design中的悬浮响应按钮(FloatingActionButton)效果,就是安卓App列表界面常见的右下角一个『加号』或『三点省略号』。而Ionic本身提供的按钮是没法实现这样的效果的。但是,我们知道,Ionic可以认为是AngularJS的移动端实现,而在Github上有基于AngularJS的实现这种效果的控件ng-material-floating-button。所以,这样的效果在Ionic项目中应该也是可以实现的。

写这篇教程的初衷,一是中文应该还没有这样一个教程;二是Mfb控件的README并不完全适合Ionic。自己在研究的过程中走了一些弯路,索性就总结一下关键的地方,希望有所帮助。

首先,在Cmd窗口中输入ionic start mfbdemo blank回车,新建一个名为mfbdemo的Ionic空白项目后,再输入cd your-app-name回车,接着输入bower install ng-mfb --save,其中--save参数是保存配置到文件bower.json中。

然后,在mfbdemo\www\index.html中链接相应的css和js文件:

<link href="lib/ng-material-floating-button/mfb/dist/mfb.css" rel="stylesheet"/>
<script src="lib/ng-material-floating-button/src/mfb-directive.js"></script>

接下来,在mfbdemo\www\js\app.js中将Mfb模块添加到
angular.module

angular.module('starter', ['ionic', 'ng-mfb'])

最后,在mfbdemo\www\index.html</body>前写入:

<nav mfb-menu position="br" effect="zoomin" label="hover here" active-icon="ion-edit" resting-icon="ion-plus-round" toggling-method="click">
<button mfb-button icon="paper-airplane" label="menu item"></button>
</nav>

输入ionic serve,在Chrome中就可以看到效果了。

关于元素具体的属性,去看README好了,这里就不往下写了。