Polymer - Paper Toast

Quiz

Paper-toast provides an alert notification and allows only one notification at one particular time. You can use this element in your application, by running the following command to install it in your project directory.

bower install --save PolymerElements/paper-toast

Example

The following example specifies the use of paper-toast 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.

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-toast/paper-toast.html">
<link rel = "import" href = "bower_components/paper-button/paper-button.html">

<dom-module id = 'my-app'>
   <template>
      <style>
         #container {
            padding: 100px;
            border: 1px solid gray;
            width: 30%;
         }
      </style>
      
      <h3>Paper-Toast Example</h3>
      <div id = "container">
         <paper-button raised onclick = "toast.open()">Click Here</paper-button>
      </div>
      <paper-toast id = "toast" class = "fit-bottom" text = "Welcome to Tutorialspoint.">
      </paper-toast>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {
               toast.fitInto = container;      
            });
         }
      });
   </script>
</dom-module>

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.

When you click the Click Here button, it will display the following screenshot as an output.

polymer_elements.htm

Print Page