¿Pensando en incluir cards en tu aplicación de Ionic y no sabes cómo? O quizás sí que sabes, pero te falta algo de información sobre los campos o las funciones que tiene disponibles ¿verdad?
Mi nombre es Aitor Sánchez González, soy desarrollador de apps desde 2014, y en este artículo aprenderás cómo puedes usar las ion card de una manera sencilla y práctica en tus desarrollos. Cuando apliques todo, claro.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
¿Cómo se instala el componente ion-card?
Al estar dentro del core del sistema, y no necesitar ninguna comunicación nativa con el dispositivo, no es necesaria ninguna instalación. Ya está todo incluido en el paquete principal.
¿Ionic card necesita alguna configuración?
Tampoco necesitamos ninguna configuración adicional. Es un componente HTML que está ahí para que lo usemos. No necesita, a menos que nosotros queramos realizar algo más, codificación TS. Todo se realiza a través del HTML.
Cómo se usa Card Ionic
En primer lugar, como hacemos en todos los artículos, veamos un ejemplo a partir del cual podemos comentarlo todo.
<ion-card>
<ion-card-header>
<ion-card-subtitle>Subtítulo de la tarjeta</ion-card-subtitle>
<ion-card-title>Título de la tarjeta</ion-card-title>
</ion-card-header>
<ion-card-content>
Manténgase cerca del corazón de la naturaleza... y aléjese, de vez en cuando,
a escalar una montaña o pasar una semana en el bosque. Lava tu espíritu.
</ion-card-content>
</ion-card>
<ion-card>
<ion-item>
<ion-icon name="pin" slot="start"></ion-icon>
<ion-label>ion-item in a card, icon left, button right</ion-label>
<ion-label>ion-item en una tarjeta con icono a la izquierda y botón a la derecha.</ion-label>
<ion-button fill="outline" slot="end">Ver</ion-button>
</ion-item>
<ion-card-content>
Esto es contenido, sin etiquetas de párrafo o encabezado,
dentro de un elemento de contenido de una ion-card.
</ion-card-content>
</ion-card>
<ion-card>
<ion-item href="#" class="activated">
<ion-icon name="wifi" slot="start"></ion-icon>
<ion-label>Enlace en tarjeta ion-item 1 .activated</ion-label>
</ion-item>
<ion-item href="#">
<ion-icon name="wine" slot="start"></ion-icon>
<ion-label>Enlace en tarjeta ion-item 2</ion-label>
</ion-item>
<ion-item class="activated">
<ion-icon name="warning" slot="start"></ion-icon>
<ion-label>Botón en tarjeta ion-item 1 .activated</ion-label>
</ion-item>
<ion-item>
<ion-icon name="walk" slot="start"></ion-icon>
<ion-label>Botón en tarjeta ion-item 2</ion-label>
</ion-item>
</ion-card>
Cómo apreciamos en el ejemplo, es todo código HTML. Código personalizado por Ionic, pero HTML al fin y al cabo.
ion-card -> Será la etiqueta principal, la etiqueta que construirá nuestra tarjeta.
ion-card-header -> Cómo su propio nombre indica, se trata de la cabecera de la etiqueta. En ella vamos a poder anunciar de forma destacada, por ejemplo, el título de la tarjeta.
ion-card-title -> Cómo comentaba en el punto anterior, si queremos colocar el enunciado del contenido de la tarjeta, esta sería la etiqueta que tendríamos que utilizar. ¿Y cómo? Poniendo esta etiqueta dentro de "ion-card-header" y dentro de esta el contenido.
ion-card-subtitle -> Esta se trata de un agregado a la anterior para extender un poco más esta información.
ion-card-content -> Y llegamos a la etiqueta principal. Aquí será donde tengamos que colocar el contenido que queremos que vaya dentro de la ion-card. Aquí ya podemos elegir el HTML que nosotros queramos para rellenarla. Hay que recordar que, si queremos tener inputs de usuario, como en la mayoría de los casos, para lograr un correcto funcionamiento de estos tenemos que colocarlos entre las etiquetas de apertura y cierre <ion-item>
Para terminar de explicar el ejemplo: No es necesario que utilicemos el resto de las etiquetas a excepción de <ion-card>. Esta si que es obligatoria para crear una tarjeta de sistema. Si las creamos por nuestra cuenta, no sería necesario usarla tampoco, pero si fuese así, no estarías aquí :)
A lo que me refiero es, que no es necesario que usemos ion-card-header, ion-card-content, ion-card-subtitle ni ion-card-title para crearla. Dentro de ion-card podemos colocar lo que queramos directamente, las etiquetas mencionadas en este punto son accesos directos que ya está programados para ajustarse a las normas del estándar de material design.
Propiedades y campos de las cards de Ionic
button -> boolean -> Esta propiedad, si es verdadera, nos permite definir si habiendo botones dentro del card, controlar los eventos generados por estos. Si es false, se lanzarán los eventos sobre el mismo objeto “ion-card” y los botones no lanzarán nada. Su valor por defecto es "false".
color -> string -> En caso de que queramos setear los colores de nuestra paleta de la app, se lo podemos pasar aquí. Las opciones por defecto son: “primary”, “secondary”, “tertiary”, “success”, “warning”, “danger”, “light”, “médium”, “dark” o no pasarle ningún parámetro. Posteriormente haré un artículo donde hablaré de las paletas de colores dentro de las aplicaciones. Estate atento al blog, o suscríbete al círculo aquí (dentro está la información de lo que es), pero por ahora continuemos.
disabled -> boolean -> Si es verdadera, la tarjeta se oscurecerá y cancelará toda la interacción con el usuario. Por defecto, como es de esperar, es falso.
download -> string -> En caso de que queramos que el usuario una vez haga click en una tarjeta, cancelemos el evento de navegación por defecto y descarguemos una copia en el dispositivo de la vista renderizada a donde dirigía la navegación. El parámetro que hay que pasarle será la ruta que queremos renderizar.
href -> string -> Será la ruta de la navegación a la que queremos que se redirija al usuario una vez hace click sobre la tarjeta. En caso de que queramos que no tenga acción, se lo podemos pasar undefined o una cadena vacía.
mode -> string -> El estilo que tomará la tarjeta. Aquí tenemos dos opciones, mostrar una tarjeta con estilo de ios, pasando “ios” como parámetro o “md” para la tarjeta de “material design”. Por defecto, si es IOS, usará “ios” y en caso contrario, “md”.
rel -> string -> Será la relación del enlace que tendrá el origen, la página en la que te encuentras, con el destino, la página a donde va dirigido el enlace. Hay muchos y los puedes ver en el siguiente enlace: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types aun así, los más comunes son “nofollow”, “noopenner”, “noreferer”.
router-direction -> enum -> “back” | “forward” | “root” -> Con este atributo podemos hacer uso de la animación del router para usar la animación de avanzar, retroceder o volver al principio el componente. Por defecto, avanzar.
target -> string -> En caso de que estemos en un navegador web, en una app no tendría demasiado sentido, podemos usar el atributo target de los enlaces para, por ejemplo, abrir la página en otra pestaña, pagina, etc… Los atributos: “_blank”, “_self”, “_parent” y “_top”.
type -> enum -> “button” | “reset” | “submit” -> En caso de que el atributo “button” sea verdadero, es el primero que hemos visto en la lista, nos permitirá definir el rol de este. Por defecto: “button”.
Ahora las propiedades CSS de Ion Card
Como módulo visual que es, tenemos alguna propiedad CSS predefinida que podemos cambiar para poder darle un poco de estilo. En este caso van a ser dos, y son las siguientes:
--background -> Nos permite definir el fondo de la tarjeta.
--color -> Nos permite definir el color de la tarjeta.
Tutorial en video, por si te gusta más ver que leer
Algo más que quizás te interesa
Si mejoras de manera constante tus logos, los de tus apps, mediante alguna estrategia que tu quieras, vas a aumentar las descargas de tu app y tus ingresos. El logo es la puerta de entrada a tu app y a la ficha de tu app. Y para hacer que puedas hacer esto, ponemos a tu disposición esta herramienta que hemos creado. Evalua, optimiza y mejora tu logo con ella y verás que pronto llegan los resultados. No te espoileo más, entra en el enlace.
Y hasta aquí este artículo. Espero haberte ayudado a entender y usar las Cards. Nos vemos en el siguiente. Hasta entonces ¡que vaya bien!