Polymère - Ondulation du papier

L'ondulation du papier est un effet d'ondulation visuel, qui peut être vu lorsque vous cliquez sur un bouton, une icône ou tout élément que vous choisissez pour avoir un effet d'entraînement. L'effet ressemble à des cercles concentriques avec un mouvement à partir du point de contact.

Vous pouvez utiliser cet élément dans votre application, en exécutant la commande suivante pour l'installer dans votre répertoire de projet.

bower install --save PolymerElements/paper-ripple

Exemple

L'exemple suivant spécifie l'utilisation de l'élément paper-ripple dans Polymer.js. Créez un fichier index.html et ajoutez-y le code suivant.

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

Maintenant, ouvrez le fichier my-app.html et ajoutez-y le code suivant.

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

Production

Pour exécuter l'application, accédez au répertoire de projet créé et exécutez la commande suivante.

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.