Polímero - Paper Fab

Paper-fab es un botón de acción flotante, que proporciona un efecto dominó cuando el usuario toca el botón. Este botón puede tener una imagen colocada en el centro. Para obtener paper-fab e ironicons en su directorio, debe ejecutar el siguiente comando en el símbolo del sistema.

bower install --save PolymerElements/paper-fab

Ejemplo

El siguiente ejemplo especifica el uso del elemento de ondulación de papel en Polymer.js. Cree un archivo index.html y agregue el siguiente código en él:

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

Ahora, abra el archivo my-app.html e incluya el siguiente código en él.

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

Salida

Para ejecutar la aplicación, navegue hasta el directorio del proyecto creado y ejecute el siguiente comando.

polymer serve

Ahora abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.

↰ Previous page