Polymer Paper Fab

by Online Tutorials Library July 14, 2022

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.

paper fab 1

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:

paper fab 2

Next TopicPaper Checkbox

Polymer Paper Fab

Polymer-Paper Fab

Example

Apache Pig UNION Operator

PostgreSQL BIGINT

You may also like