Style

SimpleStyleSample

@Composable
fun SimpleStyleSample() {
    // Create a styleable box
    @Composable
    fun StyleableBox(modifier: Modifier = Modifier, style: Style = Style) {
        Box(modifier = modifier.styleable(null, style))
    }
    // Style the styleable box to be a 150x150 green box
    StyleableBox(
        style = {
            background(Color.Green)
            size(150.dp)
        }
    )
}

StyleAnimationSample

@Composable
fun StyleAnimationSample() {
    // Create a styleable clickable box
    @Composable
    fun ClickableStyleableBox(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        style: Style = Style,
        enabled: Boolean = true,
    ) {
        val interactionSource = remember { MutableInteractionSource() }
        val styleState = rememberUpdatedStyleState(interactionSource) { it.isEnabled = enabled }
        Box(
            modifier =
                modifier
                    .clickable(interactionSource = interactionSource, onClick = onClick)
                    .styleable(styleState, style)
        )
    }
    ClickableStyleableBox(
        onClick = {},
        style = {
            background(Color.Blue)
            size(150.dp)
            hovered { animate { background(Color.Yellow) } }
            pressed { animate { background(Color.Red) } }
            disabled { animate { background(Color.Gray) } }
        },
    )
}