srcminipaper-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>输出
评论前必须登录！
注册