ポリマー-紙バッジ

ペーパーバッジは、ステータスまたは通知を表す円形のテキストバッジです。要素の右上隅に配置されます。アイコン属性を追加することにより、アイコンを含めることができます。ディレクトリ内のペーパーバッジとアイコンを取得するには、コマンドプロンプトで次の2つのコマンドを使用する必要があります。

bower install --save PolymerElements/paper-badge
bower install --save PolymerElements/iron-iconset

例

次の例では、Polymer.jsでpaper-badge要素の使用を指定しています。 indexlファイルを作成し、その中に次のコードを追加します。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-appl'>
   </head>

   <body>
      <my-app></my-app>
   </body>
</html>

次に、_my-appl_ファイルを開き、次のコードを含めます。

<!doctype html>
<html>
   <link rel = 'import' href = 'bower_components/polymer/polymerl'>
   <link rel = 'import' href = 'bower_components/paper-badge/paper-badgel'>
   <link rel = 'import' href = 'bower_components/iron-iconset/iron-iconsetl'>
   <link rel = "import" href = "bower_components/iron-icons/iron-iconsl">
   <link rel = "import" href = "bower_components/iron-icons/social-iconsl">
   <link rel = "import" href = "bower_components/iron-icons/communication-iconsl">

   <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-paper-badge

ポリマー-紙バッジ

例

出力