BasicComponent

BasicComponent is a foundational standard component in Miuix. It provides customizable content areas on the start and end sides, along with a title and summary, making it suitable for building list items, settings items, and other UI elements.

This project builds upon it to provide some extended components, enabling developers to quickly create UI components that conform to design specifications. See the usage of Extended Components for details.

Import

import top.yukonga.miuix.kmp.basic.BasicComponent

Basic Usage

The BasicComponent can be used to display title and summary information:

BasicComponent(
    title = "Setting Item Title",
    summary = "This is the description text for the setting item"
)

Component Variants

Clickable Component

BasicComponent(
    title = "Wi-Fi",
    summary = "Connected to MIUI-WiFi",
    onClick = { /* Handle click event */ }
)

With Start Icon

BasicComponent(
    title = "Nickname",
    summary = "A brief introduction",
    startAction = {
        Icon(
            modifier = Modifier.padding(end = 16.dp),
            imageVector = MiuixIcons.Contacts,
            contentDescription = "Avatar Icon",
            tint = MiuixTheme.colorScheme.onBackground
        )
    },
    onClick = { /* Handle click event */ }
)

With End Actions

var isFlightMode by remember { mutableStateOf(false) }

BasicComponent(
    title = "Flight Mode",
    endActions = {
        Switch(
            checked = isFlightMode,
            onCheckedChange = { isFlightMode = it }
        )
    }
)

Custom Content Variant

In addition to the title and summary variant, BasicComponent also provides an overload that accepts custom content. This is useful when you want full control over the layout inside the component while still reusing the container and interactions:

BasicComponent(
    startAction = {
        Icon(
            modifier = Modifier.padding(end = 16.dp),
            imageVector = MiuixIcons.Contacts,
            contentDescription = "Avatar Icon",
            tint = MiuixTheme.colorScheme.onBackground
        )
    },
    endActions = {
        Text("Details")
    }
) {
    Text(
        text = "Custom Title",
        style = MiuixTheme.textStyles.headline1
    )
    Text(
        text = "Custom content description",
        style = MiuixTheme.textStyles.body2
    )
}

Component States

Disabled State

BasicComponent(
    title = "Mobile Network",
    summary = "SIM card not inserted",
    enabled = false
)

Properties

BasicComponent Properties (title and summary variant)

Property Name	Type	Description	Default Value	Required
modifier	Modifier	Modifier for the component	Modifier	No
title	String?	Title of the component	null	No
titleColor	BasicComponentColors	Title color configuration	BasicComponentDefaults.titleColor()	No
summary	String?	Summary of the component	null	No
summaryColor	BasicComponentColors	Summary color configuration	BasicComponentDefaults.summaryColor()	No
startAction	@Composable (() -> Unit)?	Composable content on the start side of the component	null	No
endActions	@Composable (RowScope.() -> Unit)?	Composable content on the end side of the component	null	No
bottomAction	@Composable (() -> Unit)?	Composable content at the bottom of the component	null	No
insideMargin	PaddingValues	Internal padding of the component	BasicComponentDefaults.InsideMargin	No
onClick	(() -> Unit)?	Callback triggered when the component is clicked	null	No
holdDownState	Boolean	Whether the component is in the pressed state	false	No
enabled	Boolean	Whether the component is enabled	true	No
interactionSource	MutableInteractionSource?	Interaction source of the component	null	No

BasicComponent Properties (custom content variant)

Property Name	Type	Description	Default Value	Required
modifier	Modifier	Modifier for the component	Modifier	No
startAction	@Composable (() -> Unit)?	Composable content on the start side of the component	null	No
endActions	@Composable (RowScope.() -> Unit)?	Composable content on the end side of the component	null	No
bottomAction	@Composable (() -> Unit)?	Composable content at the bottom of the component	null	No
insideMargin	PaddingValues	Internal padding of the component	BasicComponentDefaults.InsideMargin	No
onClick	(() -> Unit)?	Callback triggered when the component is clicked	null	No
holdDownState	Boolean	Whether the component is in the pressed state	false	No
enabled	Boolean	Whether the component is enabled	true	No
interactionSource	MutableInteractionSource?	Interaction source of the component	null	No
content	@Composable ColumnScope.() -> Unit	Composable content of the component	-	Yes

BasicComponentDefaults Object

The BasicComponentDefaults object provides default values and color configurations for the BasicComponent.

BasicComponentDefaults Constants

Constant Name	Type	Description	Default Value
InsideMargin	PaddingValues	Internal padding of the component	PaddingValues(16.dp)

BasicComponentDefaults Methods

Method Name	Type	Description
titleColor()	BasicComponentColors	Creates title color configuration
summaryColor()	BasicComponentColors	Creates summary color configuration

BasicComponentColors Class

Used to configure the color states of the component.

Property Name	Type	Description
color	Color	Color in normal state
disabledColor	Color	Color in disabled state

Advanced Usage

Complex Layout Component

BasicComponent(
    title = "Volume",
    summary = "Media Volume: 70%",
    startAction = {
        Icon(
            modifier = Modifier.padding(end = 16.dp),
            imageVector = MiuixIcons.Play,
            contentDescription = "Volume Icon",
            tint = MiuixTheme.colorScheme.onBackground
        )
    },
    endActions = {
        IconButton(onClick = { /* Decrease volume */ }) {
            Icon(
                imageVector = MiuixIcons.Remove,
                contentDescription = "Decrease Volume",
                tint = MiuixTheme.colorScheme.onBackground
            )
        }
        Text("70%")
        IconButton(onClick = { /* Increase volume */ }) {
            Icon(
                imageVector = MiuixIcons.Add,
                contentDescription = "Increase Volume",
                tint = MiuixTheme.colorScheme.onBackground
            )
        }
    }
)

Custom Style Component

BasicComponent(
    title = "Custom Component",
    summary = "Using custom colors",
    titleColor = BasicComponentColors(
        color = Color.Blue,
        disabledColor = Color.Gray
    ),
    summaryColor = BasicComponentColors(
        color = Color.DarkGray,
        disabledColor = Color.LightGray
    ),
    insideMargin = PaddingValues(horizontal = 24.dp, vertical = 12.dp),
    onClick = { /* Handle option click */ }
)

Usage in a List

val options = listOf("Option 1", "Option 2", "Option 3", "Option 4")

Column {
    options.forEach { option ->
        BasicComponent(
            title = option,
            onClick = { /* Handle option click */ }
        )
    }
}

Changelog

Last edited about 1 month ago

View full history

007e8c4-docs: Add doc about Snackbar

a8fca42-library: Rename: Left -> Start & Right -> End

6633088-build(fmt): Enable more ktlint checks 3

1769fbb-refactor: Move extended icon to a separate library

bdab7b3-library: Remove onClick from some composite components

97d2fba-library: Add bottomAction param to BasicComponent

492f573-library: Add spacer between rightActions in BasicComponent (#143)

e122dbc-library: Optimize some recomposition issues

752f3df-docs: Preview for components in documentation website (#80)

5ec7367-library: Move holdDownState param to BasicComponent

6b3526e-docs: Fix document page hyperlink issue

7b99e64-docs: Add English version through AI translation

ab6bb69-chore: Add documents (#63)