CompactCard
Compact Card is a component that displays simple content and an entry point to other pages for more detailed information.
Parameters
Typically the title of the page you are linking to.
The media container which can contains Image or Video.
Modifier to be applied to the layout of the card.
A small text label typically used to show categorization or attribution.
Addition content to display on the card, such as a badge, or commercial message (can be used only on Image).
The variant of the card, affecting its visual style.
The theme of the card, which define its colors and overall appearance.
Toggle on/off arrow in the footer.
The size of the title which can be TitleSize.Medium, TitleSize.Small, or TitleSize.XSmall.
The source of interactions for the card, such as hover or focus events.
Lambda to be invoked when the card is clicked.
See also
Samples
val title = "Title"
val label = "Label"
val painter = painterResource(R.drawable.ic_avatar_person)
val context = LocalContext.current
SkapaTheme2(isSystemInDarkTheme()) {
Column(
verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space150),
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.padding(horizontal = SkapaSpacing.space100)
.verticalScroll(rememberScrollState())
) {
CompactCard(
title = title,
compactMediaContainer = CompactMediaContainer.Image(painter = painter, contentDescription = "Avatar image with dog"),
label = label
) {
Toast
.makeText(context, "Avatar CompactCard", Toast.LENGTH_SHORT)
.show()
}
Spacer(modifier = Modifier.height(SkapaSpacing.space150))
CompactCard(
title = title,
compactMediaContainer = CompactMediaContainer.Image(painter = painter, contentDescription = "Avatar image with dog"),
label = label,
variant = CompactCardVariant.Simple
) {
Toast
.makeText(context, "Avatar CompactCard", Toast.LENGTH_SHORT)
.show()
}
}
}