聚合物 - 徽章

纸质徽章是一个代表状态或通知的圆形文本徽章。它位于某个元素的右上角。通过添加图标属性可以包含某个图标。若要获取目录中的 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.htm

打印页面

上一个

下一个