Filtros en Polymer 2 con DomRepeat
Filtros en Polymer 2 con DomRepeat

El componente Iron Pages nos puede ser útil en muchas ocasiones, el caso más típico es cuando necesitemos cargar contenido de forma dinámica en forma de tabs y hacer que se muestren u oculten de forma dinámica al ejecutar un determinado evento, por ejemplo al pulsar un botón.

En este tutorial vamos a ver cómo crear un elemento de tipo Iron Pages con Polymer y también veremos cómo utilizar el componente Iron MenuBar a fin de crear una sencilla navegación y que al pulsar en cada uno de sus elementos cargue su contenido relacionado de nuestro elemento Iron Pages.

Lo primero que debes hacer es instalar las dependencias necesarias, para ello crea un archivo bower.json con el siguiente contenido.


Ahora simplemente ejecuta el siguiente comando.

Utilizar el componente Iron Pages con Polymer

Para utilizar Iron Pages simplemente crea un nuevo archivo llamado simple-page.html y añade el siguiente código que pasamos a explicar.


Con la línea iron-pages selected=”0″ creamos el elemento y le decimos que la página seleccionada va a ser la 0, es decir, la primera. Debemos saber que para Iron Pages cada página es un elemento padre dentro del mismo, por lo tanto, si tenemos 3 divs de la siguiente forma.


Para Iron Pages tendremos tres páginas, así de sencillo.

El selector content nos permite cargar contenido de forma dinámica desde fuera del elemento a nuestro Iron Pages.

Finalmente tenemos la función select la cuál recibe el índice de la página a cargar, con el método select podemos cargar la página en cuestión.

Antes de ver cómo utilizar este elemento vamos a crear otro de tipo menu bar, así que crea un archivo llamado menu-bar.html y añade el siguiente código.


Así de sencillo, lo único que debemos definir es su comportamiento con la propiedad behaviors, en este caso le decimos que será de tipo Polymer.IronMenubarBehavior.

Ahora sí, abre el archivo index.html y añade el siguiente código para ver que todo funciona perfectamente.


Sólo te falta ejecutar el navegador y ver como todo está funcionando perfectamente, si pulsas en cualquier elemento del menu-bar verás que su página correspondiente es cargada.