El componente Card incluye contenido y acciones sobre un solo tema.
Anatomía
De forma predeterminada, estas tarjetas son rectangulares, con esquinas redondeadas y un fondo gradiente. Establece la altura máxima de tu tarjeta en 60% para asegurarte de que se muestre por completo en la pantalla, ya que las pantallas circulares pueden recortar hasta el 20% de las partes inferior y superior de la pantalla.
Componentes relacionados
Tarjeta de título
Usa las tarjetas de título para mostrar información dentro de una aplicación, como un mensaje. Estas tarjetas de título tienen un diseño con tres espacios que incluyen el título, un campo opcional para la hora y el contenido relevante, como una imagen o texto.
Tarjeta de apps
Usa las tarjetas de apps para mostrar elementos interactivos de varias aplicaciones. Las tarjetas de apps tienen un diseño con cinco espacios que incluyen el ícono y el nombre de la aplicación, la hora en que ocurrió la actividad, un título de algún tipo y el contenido relevante, como una imagen o texto.
Recomendaciones de diseño
Las tarjetas de imagen muestran contenido relacionado a un solo tema con una imagen de fondo. Las tarjetas de imagen también pueden mostrar imágenes independientes.
TitleCard(
onClick = { ... },
title = { Text("Workout") },
backgroundPainter = CardDefaults.imageWithScrimBackgroundPainter(
backgroundImagePainter = painterResource(id = R.drawable.backgroundimage)
),
contentColor = MaterialTheme.colors.onSurface,
titleColor = MaterialTheme.colors.onSurface
) {
Text("12 songs · 1 Hour 32 mins")
}
Tamaños
De forma predeterminada, las tarjetas tienen el ancho máximo del contenedor.
Altura de la tarjeta
La altura de la tarjeta es flexible. Está determinado por el contenido de los componentes.
En las caras de reloj redondas, se recortan las tarjetas que miden más del 60% de la altura de las pantallas.