Tarjetas
Last updated
Last updated
Las tarjetas (cards) son otro elemento ampliamente usado para mostrar y organizar la información. Para utilizarlas simplemente tenemos que escribir un bloque de código como el siguiente:
Con lo que obtendriamos el siguiente resultado:
Dentro de la sección interior (item) podemos incluir todo el código que queramos: texto, otras etiquetas HTML u otros componentes de Ionic. Si ponemos varias secciones item simplemente se verán apiladas una después de la otra:
A continuación vamos a ver algunos elementos más que podemos usar con las tarjetas.
Las tarjetas se puede personalizar de forma similar a como si fueran una pantalla normal. Por ejemplo, podemos añadirle de forma muy sencilla una cabecera y un pie de página dentro de la misma tarjeta. Para esto simplemente tenemos que utilizar la clase CSS item-divider antes o después del bloque de contenido:
Con lo que obtendríamos el siguiente resultado:
Los elementos de la tarjeta también pueden ser enlaces (<a>) sobre los que aplicamos la clase CSS item. Estos bloques se pueden apilar unos debajo de otros creando una tarjeta con diferentes secciones, por ejemplo una cabecera, una sección de contenido principal y por último enlaces. En estos bloques también se pueden incluir iconos, pero para esto tenemos que aplicar la clase CSS item-icon-left. A continuación se incluye un ejemplo:
Con este código obtendríamos una tarjeta similar a la siguiente:
