Polímero - Botón de papel
El botón de papel es un botón simple que tiene un efecto dominó desde el punto de contacto. Para obtener el botón de papel en su directorio, debe usar el siguiente comando en el símbolo del sistema.
bower install --save PolymerElements/paper-button
Ejemplo
El siguiente ejemplo especifica el uso del elemento de botó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>
<h2>Paper-Button Example</h2>
<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-button/paper-button.html">
<link rel = "import" href = "bower_components/paper-styles/paper-styles.html">
<dom-module id = 'my-app'>
<template>
<div class = "container">
<paper-button toggles raised class = "green">Active</paper-button>
<paper-button disabled class = "disabled">Disabled</paper-button>
</div>
<div class = "container" ></div>
<style is = "custom-style">
#container {
display: flex;
}
paper-button {
font-family: 'Roboto', 'Noto', sans-serif;
font-weight: normal;
font-size: 14px;
-webkit-font-smoothing: antialiased;
}
paper-button.green:hover {
background-color: var(--paper-green-400);
}
paper-button.green {
background-color: var(--paper-green-500);
color: white;
}
paper-button.green[active] {
background-color: var(--paper-red-500);
}
paper-button.disabled {
color: black;
background-color:#969696;
}
</style>
</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.