SuperSpinner

SuperSpinner is a dropdown selector component in Miuix that provides titles, summaries, and a list of options with icons and text. It supports click interaction and various display modes, commonly used in option settings with visual aids. This component is similar to SuperDropdown but offers richer functionality and interaction experience.

Prerequisite

This component depends on Scaffold providing MiuixPopupHost to render popup content. It must be used within Scaffold, otherwise popup content will not render correctly.

Import

import top.yukonga.miuix.kmp.extra.SuperSpinner
import top.yukonga.miuix.kmp.extra.SpinnerEntry

Basic Usage

The SuperSpinner component provides basic dropdown selector functionality:

var selectedIndex by remember { mutableStateOf(0) }
val options = listOf(
    SpinnerEntry(title = "Option 1"),
    SpinnerEntry(title = "Option 2"),
    SpinnerEntry(title = "Option 3"),
)

Scaffold {
    SuperSpinner(
        title = "Dropdown Selector",
        items = options,
        selectedIndex = selectedIndex,
        onSelectedIndexChange = { selectedIndex = it }
    )
}

Options with Icons and Summaries

// Create a rounded rectangle Painter
class RoundedRectanglePainter(
    private val cornerRadius: Dp = 6.dp
) : Painter() {
    override val intrinsicSize = Size.Unspecified

    override fun DrawScope.onDraw() {
        drawRoundRect(
            color = Color.White,
            size = Size(size.width, size.height),
            cornerRadius = CornerRadius(cornerRadius.toPx(), cornerRadius.toPx())
        )
    }
}

var selectedIndex by remember { mutableStateOf(0) }
val options = listOf(
    SpinnerEntry(
        icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFF5B29)) },
        title = "Red Theme",
        summary = "Vibrant red"
    ),
    SpinnerEntry(
        icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF3482FF)) },
        title = "Blue Theme",
        summary = "Calm blue"
    ),
    SpinnerEntry(
        icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF36D167)) },
        title = "Green Theme",
        summary = "Fresh green"
    ),
    SpinnerEntry(
        icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFFB21D)) },
        title = "Yellow Theme",
        summary = "Bright yellow"
    )
)

Scaffold {
    SuperSpinner(
        title = "Function Selection",
        summary = "Choose the action you want to perform",
        items = options,
        selectedIndex = selectedIndex,
        onSelectedIndexChange = { selectedIndex = it }
    )
}

Component States

Disabled State

SuperSpinner(
    title = "Disabled Selector",
    summary = "This selector is currently unavailable",
    items = listOf(SpinnerEntry(title = "Option 1")),
    selectedIndex = 0,
    onSelectedIndexChange = {},
    enabled = false
)

Dialog Mode

SuperSpinner also supports dialog mode, suitable for displaying a larger number of options or when a more prominent selection interface is needed. This mode can be activated by providing the dialogButtonString parameter.

var selectedIndex by remember { mutableStateOf(0) }
val options = listOf(
    SpinnerEntry(title = "Option 1"),
    SpinnerEntry(title = "Option 2"),
    SpinnerEntry(title = "Option 3")
)

Scaffold {
    SuperSpinner(
        title = "Dialog Mode",
        dialogButtonString = "Cancel",
        items = options,
        selectedIndex = selectedIndex,
        onSelectedIndexChange = { selectedIndex = it }
    )
}

Properties

SuperSpinner Properties (Dropdown Mode)

Property Name	Type	Description	Default Value	Required
items	List<SpinnerEntry>	Options list	-	Yes
selectedIndex	Int	Current selected item index	-	Yes
title	String	Selector title	-	Yes
modifier	Modifier	Component modifier	Modifier	No
titleColor	BasicComponentColors	Title text color config	BasicComponentDefaults.titleColor()	No
summary	String?	Selector description	null	No
summaryColor	BasicComponentColors	Summary text color config	BasicComponentDefaults.summaryColor()	No
spinnerColors	SpinnerColors	Color configuration for spinner	SpinnerDefaults.spinnerColors()	No
startAction	@Composable (() -> Unit)?	Custom start side content	null	No
bottomAction	@Composable (() -> Unit)?	Custom bottom side content	null	No
insideMargin	PaddingValues	Internal content padding	BasicComponentDefaults.InsideMargin	No
maxHeight	Dp?	Maximum dropdown height	null	No
enabled	Boolean	Interactive state	true	No
showValue	Boolean	Show current selected value	true	No
onSelectedIndexChange	((Int) -> Unit)?	Selection change callback	-	No

SuperSpinner Properties (Dialog Mode)

Property Name	Type	Description	Default Value	Required
items	List<SpinnerEntry>	Options list	-	Yes
selectedIndex	Int	Current selected item index	-	Yes
title	String	Selector title	-	Yes
dialogButtonString	String	Dialog bottom button text	-	Yes
modifier	Modifier	Component modifier	Modifier	No
popupModifier	Modifier	Dialog popup modifier	Modifier	No
titleColor	BasicComponentColors	Title text color config	BasicComponentDefaults.titleColor()	No
summary	String?	Selector description	null	No
summaryColor	BasicComponentColors	Summary text color config	BasicComponentDefaults.summaryColor()	No
spinnerColors	SpinnerColors	Color configuration for spinner	SpinnerDefaults.dialogSpinnerColors()	No
startAction	@Composable (() -> Unit)?	Custom start side content	null	No
bottomAction	@Composable (() -> Unit)?	Custom bottom side content	null	No
insideMargin	PaddingValues	Internal content padding	BasicComponentDefaults.InsideMargin	No
enabled	Boolean	Interactive state	true	No
showValue	Boolean	Show current selected value	true	No
onSelectedIndexChange	((Int) -> Unit)?	Selection change callback	-	No

SpinnerEntry Properties

Property Name	Type	Description
icon	@Composable ((Modifier) -> Unit)?	Option icon
title	String?	Option title
summary	String?	Option description

SpinnerColors Properties

Property Name	Type	Description
contentColor	Color	Option title color
summaryColor	Color	Option summary color
containerColor	Color	Option background color
selectedContentColor	Color	Selected item title color
selectedSummaryColor	Color	Selected item summary color
selectedContainerColor	Color	Selected item background color
selectedIndicatorColor	Color	Selected check icon color

Changelog

Last edited about 2 months ago

View full history

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

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

bdab7b3-library: Remove onClick from some composite components

2a2a021-library: Add WindowListPopup/WindowDropdown/WindowSpinner component (#174)

4007f40-docs: fix errors

9bda688-docs: Emphasize the use of MiuixPopupHost param

97d2fba-library: Add bottomAction param to BasicComponent

99b15e6-library: add spinnerColors to SuperSpinner

45fe52e-library: ListPopup: OS3 style like

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

1fb088b-library: Refactor dialog/popup layout

5ec7367-library: Move holdDownState param to BasicComponent

7b99e64-docs: Add English version through AI translation

ab6bb69-chore: Add documents (#63)