Surface

Surface

A container that represents a surface with elevation, shape, and border.


Installation

./gradlew lumo --add Surface

Usage

Basic Surface

Surface(
    color = AppTheme.colors.surface,
    shadowElevation = 4.dp,
    shape = RoundedCornerShape(8.dp)
) {
    Text(
        text = "Surface Content",
        modifier = Modifier.padding(16.dp)
    )
}

Clickable Surface

Surface(
    onClick = { /* Handle click */ },
    color = AppTheme.colors.primary,
    contentColor = AppTheme.colors.onPrimary,
    shape = RoundedCornerShape(12.dp),
    shadowElevation = 8.dp,
    border = BorderStroke(1.dp, AppTheme.colors.border)
) {
    Text(
        text = "Clickable Surface",
        modifier = Modifier.padding(16.dp)
    )
}

API Documentation

Parameters

ParameterTypeDescription
modifierModifierModifier for the surface
shapeShapeShape of the surface
colorColorBackground color
contentColorColorColor for the content
shadowElevationDpElevation shadow size
borderBorderStroke?Optional border for the surface
onClick(() -> Unit)?Optional click handler
enabledBooleanWhether surface is enabled
selectedBooleanWhether surface is selected
checkedBooleanWhether surface is checked
interactionSourceMutableInteractionSourceSource of interactions
content@Composable () -> UnitContent to display