Polymer - Paper Badge

更新于 2025/1/30 4:07:17

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>