Card is a component used to group related information into a single digestible unit.
CardSample
@Composable
fun CardSample() {
Card { Text("This is a card") }
}
CardWithTitleAndActionSample
@Composable
fun CardWithTitleAndActionSample() {
Card(action = { Button(onClick = {}) { Text("Send") } }, title = { Text("Title") }) {
Text("This is a card with a title and action")
}
}
CardWithTitleAndHeaderSample
@Composable
fun CardWithTitleAndHeaderSample() {
Card(
title = { Text("Title") },
header = {
Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
},
) {
Text("This is a card with a title and header image")
}
}
CardWithTitleAndSubtitleAndLeadingIconSample
@Composable
fun CardWithTitleAndSubtitleAndLeadingIconSample() {
Card(
title = { Text("Title") },
subtitle = { Text("Subtitle") },
leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
Text("This is a card with a title, subtitle, and leading icon")
}
}
CardWithTrailingIconSample
@Composable
fun CardWithTrailingIconSample() {
Card(trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
Text("This is a card with a trailing icon")
}
}
ClickableCardSample
@Composable
fun ClickableCardSample() {
Card(onClick = {}) { Text("This is a card") }
}
ClickableCardWithTitleAndHeaderSample
@Composable
fun ClickableCardWithTitleAndHeaderSample() {
Card(
onClick = {},
title = { Text("Title") },
header = {
Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
},
) {
Text("This is a card with a title and header image")
}
}
ClickableCardWithTitleAndSubtitleAndLeadingIconSample
@Composable
fun ClickableCardWithTitleAndSubtitleAndLeadingIconSample() {
Card(
onClick = {},
title = { Text("Title") },
subtitle = { Text("Subtitle") },
leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
Text("This is a card with a title, subtitle, and leading icon")
}
}
ClickableCardWithTrailingIconSample
@Composable
fun ClickableCardWithTrailingIconSample() {
Card(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
Text("This is a card with a trailing icon")
}
}