Polymerjs paper-icon-button按钮 _Polymerjs元素

【Polymerjs paper-icon-button按钮】在Polymer.js中, 纸张图标按钮是一个动作按钮, 用于表示特定的动作, 例如设置。当用户触摸按钮时, 它会显示出涟漪效果。
这些按钮可以用作链接, 也可以为按钮指定样式, 如以下示例所示。
使用以下命令在你的目录中获取paper-icon-button和iron-icons：

bower install --save PolymerElements/paper-icon-button

文章图片
例子
创建一个index.html文件, 并在其中添加以下代码, 以查看Polymer.js中纸张图标按钮元素的使用。

< !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-icon-button/paper-icon-button.html"> < dom-module id = 'my-app'> < template> < h3> Paper-Icon-Button Example < /h3> < paper-icon-button icon = "settings" > < /paper-icon-button> settings< br> < paper-icon-button icon = "warning" style = "color: red; " > < /paper-icon-button> warning< br> < paper-icon-button icon = "content-cut" > < /paper-icon-button> content-cut< br> < paper-icon-button icon = "dashboard" > < /paper-icon-button> dashboard< br> < paper-icon-button icon = "flight-takeoff" > < /paper-icon-button> flight-takeoff< br> < /template> < script> Polymer ({is: 'my-app', ready: function() {this.async(function() {}); }}); < /script> < /dom-module>

输出