Polymer - Paper Badge

Quiz

The paper-badge is a circular text badge that represents 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.

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

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

To run the application, navigate to the created project directory and run the following command.

polymer serve

Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output.

polymer_elements.htm

Print Page