Tarjetas
Last updated
Was this helpful?
Last updated
Was this helpful?
Las tarjetas (cards) son otro elemento ampliamente usado para mostrar y organizar la información. Para utilizarlas disponemos de la etiqueta "ion-card", la cual a su vez se compone de una cabecera (ion-card-header) y una sección de contenido (ion-card-content):
Con lo que obtendriamos el siguiente resultado:
Ambas secciones son opcionales, es decir, no es necesario incluir siempre la cabecera, y además, la sección de contenido se puede sustituir por otro tipo de elementos, como veremos a continuación.
En las tarjetas también podemos incluir un listado de opciones simplemente usando la etiqueta <ion-list> como vimos en la sección anterior:
En este ejemplo se ha sustituido la sección de contenido por un listado, aunque no es obligatorio ya que se pueden incluir las dos secciones a la vez. En el listado se han incluido iconos de ejemplo, además de esta opción podemos utilizar cualquiera de los tipos de listados que vimos en la sección anterior.
Si visualizamos el código de ejemplo anterior obtendríamos un resultado similar al de la siguiente figura:
Otra opción interesante son las tarjetas con imágenes, las cuales nos permitirán insertar una imagen grande en la parte superior de la tarjeta junto a una sección de contenido con la descripción. Para utilizarlas simplemente tenemos que añadir la imagen como primer elemento de la tarjeta y a continuación la sección de contenido:
En el ejemplo anterior hemos utilizado también la etiqueta "<ion-card-title>" dentro de la sección de contenido para establecer el título principal de la tarjeta. Si visualizamos este código obtendríamos un resultado similar al siguiente:
