Polymerjs paper-fab元素

在Polymer.js中, paper-fab是一个浮动操作按钮, 用于在用户触摸按钮时提供波纹效果。
【Polymerjs paper-fab元素】该按钮可以是简单按钮或放置在其中的图像。
使用以下命令在你的项目目录中安装此元素, 并在你的应用程序中使用。

bower install --save PolymerElements/paper-fab

文章图片
例子
创建一个index.html文件, 并在其中添加以下代码, 以查看Polymer.js中paper-fab元素的用法。

< !doctype html> < html> < head> < link rel = 'import' href = 'http://www.srcmini.com/my-app.html'> < /head> < body> < my-app> < /my-app> < /body> < /html>

现在, 打开my-app.html文件, 并在其中包含以下代码。

< link rel = 'import' href = 'http://www.srcmini.com/bower_components/polymer/polymer.html'> < link rel = "import" href = "http://www.srcmini.com/bower_components/iron-icons/iron-icons.html"> < link rel = "import" href = "http://www.srcmini.com/bower_components/paper-fab/paper-fab.html"> < dom-module id = 'my-app'> < template> < style is = "custom-style"> paper-fab {display: inline-block; margin: 8px; }paper-fab[mini] {--paper-fab-background: #FF5722; }paper-fab[label] {font-size: 20px; --paper-fab-background: #2196F3; }< /style> < h3> Paper-Fab Example < /h3> < paper-fab icon = "alarm-on"> < /paper-fab> < paper-fab mini icon = "android"> < /paper-fab> < paper-fab mini icon = "home"> < /paper-fab> < /template> < script> Polymer ({is: 'my-app', ready: function() {this.async(function() { }); }}); < /script> < /dom-module>

输出