Cards en Ionic

Debido al tamaño de las pantallas, las tarjetas, Cards en Ionic, es una de las mejores formas para mostrar información ofreciendo una buena experiencia de usuario.

Anteriormente hablamos sobre la forma de crear listas, y las cards son muy similares de construir, pero ofrecen algunas características especiales que influyen en el rendimiento de la información como iremos viendo a lo largo del tutorial de hoy.

Creando Tarjetas en Ionic

Las cards, o tarjetas, se crean por defecto utilizando la clase card, y están formadas por elementos que utilizan la clase item. Normalmente se utiliza también la clase item-text-wrap. Esto ayudará envolviendo  la parte de la tarjeta que deseemos cuando hay mucho texto.

En el siguiente ejemplo vamos a ver como funcionan estas clases para mostrar las diferencias entre item e item-text-wrap

<div class="card">
    <div class="item">
        Elemento de tarjeta con solo item
   </div>
   <div class="item item-text-wrap">
        Elemento de tarjeta con item-text-wrap
   </div>
</div>

card1

Tarjetas con header y footer

Podemos dividir las tarjetas en secciones por medio de item-divider como ya vimos en la listas, de esta forma podemos crear tarjetas con cabeceras y pies,  o separadas por secciones.

En el siguiente ejemplo vemos como funciona y su resultado

<div class="card list">
    <div class="item item-divider">
        Cabecera
   </div> 
   <div class="item item-text-wrap">
        Texto de la tarjeta
   </div>
   <div class="item item-divider">
        Pie
   </div>
</div>

card2

Tarjeta completa

En las tarjetas podemos agregar cualquier elemento que queramos, de hecho en el siguiente ejemplo vamos a utilizar una imagen con la clase full-image junto a la clase item-body para obtener un resultado muy agradable.

<div class="card">
    <div class="item item-avatar">
        <img src="img/paisaje.jpg">
        <h2>Nombre de la Tarjeta</h2>
    </div>
    <div class="item item-body">
        <img class="full-image" src="img/paisaje.jpg">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget pharetra tortor. Proin quis eros imperdiet, facilisis nisi in, tincidunt orci. Nam tristique elit massa, quis faucibus augue finibus ac.
    </div>
</div>

card3

Como vemos el uso de las tarjetas en ionic es muy similar al uso de la listas y se pueden obtener resultados muy interesantes tan solo utilizando unas pocas clases. Esto nos demuestra la potencia de Ionic y nos da una pista de hasta dónde podemos llegar.

Si te ha servido la entrada, o te ha resultado interesante, comenta y comparte en las redes sociales…