Developers Tips & Tricks

You are here: Home / Polymer / Polymer generar Checkbox

Polymer generar Checkbox

by

Polymer 1.0

       Polymer 1.0

Generar componentes web como un Checkbox, Button, con css propios.

Polymer: un framework que combina HTML, CSS y JavaScript para crear componentes web.

Instalando Polymer

Para instalar Polymer, el método más recomendado es utilizar Bower, un paquete del Node Package Manager (npm) de NodeJS. Para instalar, configuramos nuestro proyecto con el comando

$bower init 

para crear nuestro bower.json y configurar los parámetros básicos. Una vez hecho esto, podemos instalar Polymer y los componentes que queramos. Para nuestro caso, vamos a utilizar los elementos core y los elementos paper.

$bower install --save Polymer/polymer
$bower install --save Polymer/core-elements
$bower install --save Polymer/paper-elements

Una vez se hayan descargado ya tendremos instalados los componentes principales de Polymer y los elementos de Paper en la carpeta bower_components. La ventaja de utilizar bower es que podemos actualizarlos en cualquier momento con el comando

$bower update

Utilizando elementos de Polymer

Vamos a utilizar un checkbox de Paper en nuestra página web. Para ello, lo único que tenemos que hacer es incluír el JavaScript principal de la plataforma, y el html correspondiente a paper-checkbox. Este html incluirá todas las dependencias de forma que no tenemos que preocuparnos en nada más que en incluír el elemento en nuestra web.

<!DOCTYPE html>
<html>
  <head>
    <!-- 1. Cargar platform.js soporte de elementos. -->
    <script src="bower_components/platform/platform.js"></script>

    <!-- 2. Usar HTML Import para cargar el papaer-checkbox y sus dependencias. -->
    <link rel="import"
          href="bower_components/paper-checkbox/paper-checkbox.html">
  </head>
  <body>
    <!-- 3. Utilizamos el elemento en nuestra página. -->
    <paper-checkbox>Hello World!</paper-checkbox>
  </body>
</html>