Polymerjs paper-badge元素

paper-badge是圆形的文本徽章, 用于表示状态或通知。它位于元素的右上角。通过添加icon属性可以包含一个图标。要获取目录中的paper-badge和图标, 应在命令提示符下使用以下两个命令。

bower install --save PolymerElements/paper-badge

文章图片

bower install --save PolymerElements/iron-iconset

文章图片
例子
【Polymerjs paper-badge元素】以下示例指定在Polymer.js中使用paper-badge元素。创建一个index.html文件, 并在其中添加以下代码。

< !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文件, 并在其中包含以下代码。

< !doctype html> < html> < link rel = 'import' href = 'http://www.srcmini.com/bower_components/polymer/polymer.html'> < link rel = 'import' href = 'http://www.srcmini.com/bower_components/paper-badge/paper-badge.html'> < link rel = 'import' href = 'http://www.srcmini.com/bower_components/iron-iconset/iron-iconset.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/iron-icons/social-icons.html"> < link rel = "import" href = "http://www.srcmini.com/bower_components/iron-icons/communication-icons.html"> < dom-module id = 'my-app'> < template> < div class = "container"> < span > Messages< /span> < paper-badge id = 'text' label = "4"> < /paper-badge> < /div> < div class = "container" > < span id = 'text'> Thought < /span> < paper-badge id = 'text' icon = "social:mood" label = "happy"> < /paper-badge> < /div> < style is = "custom-style"> .container { display: inline-block; margin-left: 30px; margin-right: 30px; padding-top: 30px; } /* Need to position the badge to look like a text superscript */ .container > paper-badge { --paper-badge-margin-left: 20px; --paper-badge-margin-bottom: 0px; } #text { padding-top: 55px; } < /style> < /template> < script> Polymer ({ is: 'my-app', ready: function() { this.async(function() { }); } }); < /script> < /dom-module> < /html>

输出