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>
输出
文章图片
推荐阅读
- Polymerjs paper-card元素
- Polymerjs paper-button元素
- Polymerjs neon元素
- Polymerjs iron图标iron-icon
- Polymerjs iron-swipable-container元素
- Polymerjs iron-image图像元素
- Polymerjs iron-flex-layout元素
- 让你更值钱的方法(培养稀缺(追逐新技术,淬炼已有技能做到出类拔萃,寻找自己所在的行业痛点,App开发者是市场动态平衡的典型))
- android日期时间选择器