Framework7 | Tutorial Español | Parte 3
En esta ocasión vamos a ver como utilizar algunos componentes de Framework7, uno de ellos es List View, un listado de elementos, tiene muchos usos, el principal es el mostrar contenido u opciones, se asemeja mucho a la aplicación Mail de iOS, donde tenemos un listado de correos electrónicos, al igual que en la anterior aplicación estos elementos podemos realizar acciones al deslizar hacia derecha o izquierda, pero esto lo veremos más adelante.
Tercera parte de este tutorial de Framework7, si no has leído la primera o segunda parte, aquí las tienes.
List View
Tenemos varias opciones para mostrar, con icono, con texto o con un label a la derecha de cada elemento, claro está todos se pueden usar o no.
Estructura Principal
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item title</div>
<div class="item-after">Label</div>
</div>
</li>
<!-- .... Más elementos ... -->
</ul>
</div>
El ejemplo superior nos mostraría el primer elemento de la imagen, En en el se utilizan todos los elementos disponibles, icono, titulo y label.
Pero si miramos un poco más abajo de la imagen vemos que podemos utilizar solo títulos. Nos provee de muchas opciones, por ejemplo un menú o cualquier otro listado que necesitemos.
En la segunda linea de la sección Full Layout encontramos que han incluido un número, para añadirlo colocamos en la sección del Label «item-after»
<span class="badge">5</span>
De esta manera podemos por ejemplo mostrar los mensajes sin leer, el número de posts, etc.
Enlaces
Dentro de cada elemento podemos agregar un enlace, es muy fácil pues solo tenemos que utilizar un <a>.
Nos añadirá una flecha a la derecha, mostrando que ese elemento se puede hacer click.
Para agregar un enlace haríamos lo siguiente
<a href="#" class="item-link item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item title</div>
<div class="item-after">Label</div>
</div>
</a>
Colocamos el enlace en el atributo href y ya tendríamos preparado para navegar por nuestros elementos.
Recordad que es diferente si utilizáis material de Android o no, las capturas son con los estilos de iOS, En material la estructura es la misma, solo que cambia el estilo, claro.
Ya hemos visto como implementar List Views en nuestra aplicación, pero trae más funciones, por ejemplo como dividir elementos dentro del List View, siguiendo la estructura normal, podemos agregar una separación entre elementos, añadiendo un nuevo elemento al <ul> principal.
<li class="item-divider">Esto divide el contenido</li>
Podemos utilizarlo por ejemplo para hacer una aclaración del contenido por ejemplo, aunque su función principal es dividir.
List View Group
<div class="list-group">
<ul>
<li class="list-group-title">First group</li>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item title</div>
<div class="item-after">Label</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item with badge</div>
<div class="item-after"><span class="badge">5</span></div>
</div>
</li>
...
</ul>
</div>
Para agrupar diferentes listados en una misma vista, los elementos anteriores se ingresan dentro de un div con la clase list-group, esta provee como bien dice el titulo de agregar diferentes apartados.
Antes hablábamos de que List View es muy parecido a la app Mail de iOS, pues bien si se parecía, esto que vamos a ver a continuación es la copia ya que podremos agregar más información a cada uno de los elementos.
<div class="list-block media-list">
<ul>
<li>
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Facebook</div>
<div class="item-after">17:14</div>
</div>
<div class="item-subtitle">New messages from John Doe</div>
<div class="item-text">Lorem ipsum dolor sit amet...</div>
</div>
</a>
</li>
...
</ul>
</div>
Media List View
En el ejemplo anterior mostramos la primera linea de la imagen, como ves es una copia de Mail App, se trata de Media List View.
Pero para completar esta parte del tutorial de Framework7 vamos a añadir algo para darle más opciones a estos listados, y nunca mejor dicho.
Como en iOS, cuando deslizas el elemento hacia un lado (depende de la aplicación) aparecen unas opciones, por ejemplo Archivar y Eliminar, también se pueden implementar en nuestra aplicación con Framework7, Simplemente es hacer un cambio en nuestro HTML y agregar unas clases.
Para ello vamos a examinar el siguiente código.
Agregar Opciones al deslizar
<li class="swipeout">
<div class="swipeout-content item-content">
<div class="item-media">...</div>
<div class="item-inner">...</div>
</div>
<div class="swipeout-actions-right">
<a href="#" class="action1 bg-orange">Action 1</a>
<a href="#" class="action2">Action 2</a>
</div>
</li>
Como vemos en el código anterior el elemento <li> ha pasado de no tener clase a agregar swipeout, esto accionará los elementos que se encuentran en swipeout-actions-right que son los botones que se muestran en la imagen.
Ahora podremos agregar acciones a cada uno de los botones para ese elemento, por ejemplo como he dicho antes borrarlo, archivarlo o editarlo.
Vamos acabando esta parte del tutorial, todavía quedan muchos componentes por ver.
Hasta aquí esta parte, en el siguiente veremos otros componentes como Cards, que son otro modo de mostrar elementos que también nos dan muchas opciones de implementación
No olvides compartir este tutorial en tus redes sociales, o donde quieras 🙂
Nos vemos pronto, Happy Code!
