Polymer - Paper Badge
paper-badge 是一个圆形文本徽章，代表状态或通知。它位于元素的右上角。它可以通过添加 icon 属性来包含图标。要获取目录中的 paper-badge 和图标，您应该在命令提示符中使用以下两个命令。
bower install --save PolymerElements/paper-badge bower install --save PolymerElements/iron-iconset
示例
以下示例指定了在 Polymer.js 中使用 paper-badge 元素。创建一个 index.html 文件并在其中添加以下代码。
<!doctype html>
<html>
<head>
<link rel = 'import' href = 'my-app.html'>
</head>
<body>
<my-app></my-app>
</body>
</html>
现在，打开 my-app.html 文件并在其中包含以下代码。
<!doctype html>
<html>
<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = 'import' href = 'bower_components/paper-badge/paper-badge.html'>
<link rel = 'import' href = 'bower_components/iron-iconset/iron-iconset.html'>
<link rel = "import" href = "bower_components/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/iron-icons/social-icons.html">
<link rel = "import" href = "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>
输出
要运行应用程序，请导航到创建的项目目录并运行以下命令。
polymer serve
现在打开浏览器并导航到 http://127.0.0.1:8081/。以下是输出。
polymer_elements.html
