Polymer Paper Badge

by Online Tutorials Library July 14, 2022

Paper Badge

The paper-badge is a circular text badge which is used to represent a status or notification. It is positioned at the top right corner of an element. It can contain an icon by adding the icon attribute. To get the paper-badge and the icons in your directory, you should use the following two commands in the command prompt.

Example

The following example specifies the use of paper-badge element in Polymer.js. Create an index.html file and add the following code in it.

  <!doctype html>  <html>     <head>        <link rel = ‘import’ href = ‘my-app.html’>     </head>     <body>        <my-app></my-app>     </body>  </html>  

Now, open the my-app.html file and include the following code in it.

  <!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>  

Output:

Next TopicPaper Progress

Polymer Paper Badge

Paper Badge

Example

Apache Pig UNION Operator

PostgreSQL BIGINT

You may also like