Card

Card is a basic container component in Miuix, used to hold related content and actions. It provides a card container with Miuix style, suitable for scenarios such as information display and content grouping. Supports both static display and interactive modes.

Import

import top.yukonga.miuix.kmp.basic.Card
import top.yukonga.miuix.kmp.utils.PressFeedbackType // If using interactive card

Basic Usage

The Card component can be used to wrap and organize content (static card):

Card {
    Text("This is card content")
}

Properties

Card Properties

Property Name	Type	Description	Default Value	Required	Applies To
modifier	Modifier	Modifier applied to the card	Modifier	No	All
colors	CardColors?	Card color configuration	CardDefaults.defaultColors()	No	All
cornerRadius	Dp	Card corner radius	CardDefaults.CornerRadius	No	All
insideMargin	PaddingValues	Card inner padding	CardDefaults.InsideMargin	No	All
pressFeedbackType	PressFeedbackType	Feedback type when pressed	PressFeedbackType.None	No	Interactive
showIndication	Boolean?	Show indication on interaction	false	No	Interactive
onClick	(() -> Unit)?	Callback when clicked	null	No	Interactive
onLongPress	(() -> Unit)?	Callback when long pressed	null	No	Interactive
content	@Composable ColumnScope.() -> Unit	Composable function for card content area	-	Yes	All

WARNING

Some properties are only available when creating an interactive card!

CardDefaults Object

The CardDefaults object provides default values and color configurations for the card component.

Constants

Constant Name	Type	Description	Default Value
CornerRadius	Dp	Card corner radius	16.dp
InsideMargin	PaddingValues	Card inner padding	PaddingValues(0.dp)

Methods

Method Name	Type	Description
defaultColors()	CardColors	The default color for card

CardColors Class

Property Name	Type	Description
color	Color	Default background color of card
contentColor	Color	Default content color of card

Advanced Usage

Custom Style Card

Card(
    cornerRadius = 8.dp,
    insideMargin = PaddingValues(16.dp),
    colors = CardDefaults.defaultColors(
        color = MiuixTheme.colorScheme.primaryVariant
    ),
) {
    Text("Custom Style Card")
}

Content-Rich Card

Card(
    modifier = Modifier.padding(16.dp),
    insideMargin = PaddingValues(16.dp)
) {
    Text(
        text = "Card Title",
        style = MiuixTheme.textStyles.title2
    )
    Spacer(modifier = Modifier.height(8.dp))
    Text(
        text = "This is a detailed description of the card, which can contain multiple lines of text."
    )
    Spacer(modifier = Modifier.height(16.dp))
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.End
    ) {
        TextButton(
            text = "Cancel",
            onClick = { /* Handle cancel event */ }
        )
        Spacer(modifier = Modifier.width(8.dp))
        TextButton(
            text = "Confirm",
            colors = ButtonDefaults.textButtonColorsPrimary(), // Use theme colors
            onClick = { /* Handle confirm event */ }
        )
    }
}

Cards in a List

LazyColumn {
    items(5) { index ->
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 8.dp),
            insideMargin = PaddingValues(16.dp)
        ) {
            Text("List Item ${index + 1}")
        }
    }
}

Interactive Card

Card(
    modifier = Modifier.padding(16.dp),
    pressFeedbackType = PressFeedbackType.Sink, // Set press feedback to sink effect
    showIndication = true, // Show indication on click
    onClick = {/* Handle click event */ },
    onLongPress = {/* Handle long press event */ }
) {
    Text("Interactive Card")
}