Il componente Card include contenuti e azioni relativi a un singolo oggetto.
Anatomia
Per impostazione predefinita, le schede sono rettangolari con angoli arrotondati e uno sfondo sfumato. Imposta l'altezza massima della scheda al 60% per assicurarti che sia completamente visualizzata sullo schermo, in quanto i display circolari possono tagliare fino al 20% della parte superiore e inferiore dello schermo.
Componenti correlati
Intertitolo
Utilizza le intertitoli per mostrare informazioni all'interno di un'applicazione, ad esempio un messaggio. Gli intertitoli hanno un layout a tre slot che include un titolo, un campo temporale facoltativo e i contenuti pertinenti, che possono essere un'immagine o un testo.
Scheda dell'app
Utilizza le schede dell'app per mostrare elementi interattivi di più applicazioni. Le schede delle app hanno un layout a cinque slot che include un'icona dell'applicazione, il nome dell'applicazione, l'ora in cui si è verificata l'attività, un titolo di qualche tipo e i contenuti pertinenti, ovvero un'immagine o un testo.
Suggerimenti di progettazione
Le schede con immagini mostrano contenuti relativi a un singolo argomento con un'immagine di sfondo. Le schede con immagini possono anche mostrare immagini indipendenti.
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")
}
Dimensioni
Per impostazione predefinita, le schede corrispondono alla larghezza massima del contenitore.
Altezza della scheda
L'altezza della scheda è flessibile. a seconda dei contenuti dei componenti.
Sui quadranti rotondi, le schede che superano il 60% dell'altezza degli schermi vengono tagliate.