Accordion

Displays collapsible content panels.

Installation

./gradlew lumo --add Accordion

Usage

Basic Example

Accordion(
    headerContent = { Text("Header") },
    bodyContent = { Text("Body Content") }
)

Group Example

val groupState = rememberAccordionGroupState(count = 3, allowMultipleOpen = false)
 
Column {
    repeat(3) { index ->
        Accordion(
            state = groupState.getState(index),
            headerContent = { Text("Header $index") },
            bodyContent = { Text("Body Content $index") }
        )
    }
}

API Documentation

Accordion

The Accordion composable creates a collapsible section for content with a header and body that expand or collapse with user interaction.

Parameters

Parameter	Type	Description
`modifier`	`Modifier`	Styles and layouts the root container.
`headerModifier`	`Modifier`	Styles the header container.
`state`	`AccordionState`	Controls the expanded/collapsed state of the accordion.
`animate`	`Boolean`	Enables or disables expand/collapse animations.
`interactionSource`	`MutableInteractionSource`	Handles user interactions such as clicks.
`headerContent`	`@Composable () -> Unit`	Content composable for the header section (clickable by default).
`bodyContent`	`@Composable () -> Unit`	Content composable for the body section (visible only when expanded).

Accordion State

Manages the state of a single accordion instance.

// Create a standalone accordion state
val state = rememberAccordionState(
    initiallyExpanded = false,
    onExpandedChange = { isExpanded ->
        // Handle state changes
    }
)

Properties

Property	Type	Description
`expanded`	`Boolean`	Indicates whether the accordion is expanded.
`enabled`	`Boolean`	Controls whether the accordion is interactable.
`clickable`	`Boolean`	Determines if the accordion header is clickable.
`onExpandedChange`	`(Boolean) -> Unit`	Callback triggered whenever the accordion’s expanded state changes.
`animationProgress`	`Float`	Current progress of the expand/collapse animation.

Methods

Method	Description
`toggle()`	Toggles the accordion between expanded and collapsed states.
`updateProgress()`	Updates the animation progress (internal use).
`collapse()`	Collapses the accordion.

Accordion Group State

Coordinates multiple accordions working together.

// Create a group state
val groupState = rememberAccordionGroupState(
    count = 3,
    allowMultipleOpen = false
)
 
// Access individual accordion states
val firstAccordionState = groupState.getState(0)

Properties

Property	Type	Default	Description
`count`	`Int`	-	Number of accordions in the group.
`allowMultipleOpen`	`Boolean`	`false`	Determines if multiple accordions can be open at the same time.

Methods

Method	Description
`getState(index)`	Returns the `AccordionState` for a given index.
`collapseAll()`	Collapses all accordions in the group.
`expand(index)`	Expands the accordion at the given index.

CLI Alert Dialog