Primeros pasos con el polímero

Estructura básica del elemento

Obtuvimos el siguiente elemento muy básico my-element guardado como src/my-element.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-element">

  <template>
    <style>
      /* local styles go here */
      :host {
        display: block;
      }
    </style>
    <!-- local DOM goes here -->
    <content></content>
  </template>

  <script>
    Polymer({
      /* this is the element's prototype */
      is: 'my-element'
    });
  </script>

</dom-module>
  • El <enlace> incluye la biblioteca Polymer usando una importación HTML.
  • El <dom-module> es el contenedor DOM local para el elemento (en este caso, my-element).
  • La <plantilla> es la definición DOM local real.
  • El <estilo> dentro de la <plantilla> te permite definir estilos que tienen como alcance este elemento y su DOM local y no afectarán nada más en el documento.
  • El <contenido> contendrá cualquier cosa que coloques dentro de tu elemento.
  • La pseudoclase :host coincide con el elemento personalizado (my-element).
  • La llamada Polymer registra el elemento.
  • La propiedad is es el nombre del elemento (tiene que coincidir con el id de <dom-module>)

Puedes importarlo en tu aplicación usando:

<link rel="import" href="src/my-element.html">

Y utilízalo como una etiqueta:

<my-element>Content</my-element>

Configuración de su primera aplicación de polímeros desde una plantilla

¡Prepárate para crear tu propia aplicación web progresiva increíble con Polymer!

Antes de que pueda comenzar a instalar Polymer, necesita lo siguiente:

Instalación de la interfaz de línea de comandos de Polymer

La CLI de Polymer le proporciona todas las herramientas necesarias para los proyectos de Polymer:

npm install -g polymer-cli

Inicialice su aplicación desde una plantilla de aplicación

Use polymer init para inicializar su aplicación desde una plantilla de aplicación.

Una plantilla interesante es --app-drawer-template. Usemos eso:

polymer init app-drawer-template

Sirve tu aplicación

No se necesita un edificio para servir su primera aplicación de polímero increíble. Solo ‘sírvelo’:

polymer serve --open

Esto abrirá la aplicación en su navegador predeterminado en http://localhost:8080.

Hola Mundo

Este ejemplo crea un elemento Polymer llamado x-foo, cuya plantilla se vincula a una propiedad de cadena, llamada “mensaje”. El HTML del elemento se importa al documento principal, lo que permite el uso de etiquetas <x-foo> en <body>.

x-foo.html

<dom-module id="x-foo">
  <template>
    <span>{{message}}</span>
  </template>

  <script>
    Polymer({
      is: 'x-foo',
      properties : {
        message: {
          type: String,
          value: "Hello world!"
        }
      }
    });
  </script>
</dom-module>

índice.html

<head>
  <!-- PolyGit used here as CDN for demo purposes only. In production,
       it's recommended to import Polymer and Web Components locally
       from Bower. -->
  <base href="https://polygit.org/polymer+1.6.0/components/">

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">

  <link rel="import" href="x-foo.html">
</head>
<body>
  <x-foo></x-foo>
</body>

Ver demostración en CodePen

Uso de elementos del catálogo de polímeros

Polymer proporciona una gran cantidad de elementos bien construidos para que los use en su aplicación.

Examínelos en su Catálogo de elementos.

Repasemos el flujo de trabajo de usar un elemento incluyendo paper-input (Documentación)

Descarga el Elemento

Para Descargar un elemento hay dos formas:

glorieta

La forma conveniente es usar la línea de comando usando el comando bower install:

instalación de Bower --save PolymerElements/paper-input

Nota: --save agrega el elemento como una dependencia al bower.json de su aplicación.

Archivo zip

La otra forma es agregar el elemento seleccionado (paper-input en este caso) a su colección (en el Catálogo de polímeros) usando “Agregar a la colección” en la navegación y descargar su colección usando el ícono de estrella en la esquina superior derecha .

Esto generará un archivo .zip que contiene el elemento y todas sus dependencias. Luego puede copiar la carpeta bower_components dentro de .zip/components al directorio raíz de su aplicación.

Importa el elemento en tu aplicación

Para importar el elemento que acaba de instalar, importe el archivo .html correspondiente:

<link rel="import" href="bower_components/paper-input/paper-input.html">

Usa el Elemento

Ahora puede usar paper-input dentro del documento al que lo importó:

<paper-input></paper-input>