Polímero - Papel ondulado

La ondulación del papel es un efecto de ondulación visual, que se puede ver al hacer clic en un botón, un icono o cualquier elemento que elija para tener un efecto de ondulación. El efecto parece círculos concéntricos con movimiento que comienza desde el punto de contacto.

Puede usar este elemento en su aplicación, ejecutando el siguiente comando para instalarlo en el directorio de su proyecto.

bower install --save PolymerElements/paper-ripple

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/paper-ripple/paper-ripple.html">
<link rel = "import" href = "bower_components/paper-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">

<dom-module id = 'my-app'>
   <template>
      <style>
         .button {
            padding-left: -4px;
            background-color: #0f9d58;
            width: 150px;
            height: 42px;      
         }       
      </style>
    
      <h3>Paper-Ripple Example </h3>
      <div class = "button">
         <paper-button toggles raised>TutorialsPoint</paper-button>
         <paper-ripple></paper-ripple>
      </div>
   </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