Polymer-Paper Fab

In Polymer.js, paper-fab is a floating action button used to provide a ripple effect when the user touches the button.

The button may be a simple button or an image placed within it.

Use the following command to install this element in your project directory and use in your application.

Example

Create an index.html file and add the following code in it to see the use of paper-fab element in Polymer.js.

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

Now, open 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/iron-icons/iron-icons.html">
<link rel = "import" href = "bower_components/paper-fab/paper-fab.html">

<dom-module id = 'my-app'>
   <template>
      <style is = "custom-style">
         paper-fab {
            display: inline-block;
            margin: 8px;
         }
         paper-fab[mini] {
            --paper-fab-background: #FF5722;
         }
         paper-fab[label] {
            font-size: 20px;
            --paper-fab-background: #2196F3;
         }
      </style>

      <h3>Paper-Fab Example </h3>
      <paper-fab icon = "alarm-on"></paper-fab>
      <paper-fab mini icon = "android"></paper-fab>
      <paper-fab mini icon = "home"></paper-fab>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app',
         ready: function() {
            this.async(function() { 
            });
         }
      });
   </script>
</dom-module>

Output: