Polímero - Botón de icono de papel

Paper-icon-button es un botón de acción, que representa una acción particular, como la configuración. Tiene un efecto dominó cuando el usuario toca el botón. Puede usar estos botones como un enlace o puede darles un estilo a los botones como se muestra en el siguiente ejemplo. Para obtener paper-icon-button e iron-icons en su directorio, en condiciones de trabajo, debe ejecutar el siguiente comando en el símbolo del sistema.

bower install --save PolymerElements/paper-icon-button

Ejemplo

Su archivo index.html debería tener el siguiente aspecto.

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

Su archivo my-app.html debería tener el siguiente aspecto.

<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-icon-button/paper-icon-button.html">

<dom-module id = 'my-app'>
   <template>
      <h3>Paper-Icon-Button Example </h3>
      <paper-icon-button icon = "settings" ></paper-icon-button>settings
      <br>
      <paper-icon-button icon = "warning" style = "color: red;" ></paper-icon-button>warning
      <br>
      <paper-icon-button icon = "content-cut" ></paper-icon-button>content-cut
      <br>
      <paper-icon-button icon = "dashboard" ></paper-icon-button>dashboard
      <br>
      <paper-icon-button icon = "flight-takeoff" ></paper-icon-button>flight-takeoff
      <br>
   </template>

   <script>
      Polymer ({
         is: 'my-app',
         ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Salida

Actualice el servidor de Polymer y lo siguiente será el resultado.

↰ Previous page