Accordion

Accordions are used to hide and show large amounts of content

Status

Resources

Usage

Accordion is a component that consists of a series of titles, and when you click on a specific title, the detailed description will be expanded. This will ensure that the user can focus on only one opened item at a time.

The following is the format for using Legion Accordion

Basic Accordion

var expanded by remember {
  mutableStateOf(false)
}

LgnAccordion(
    title = "Accordion Title",
    onClick = {
        expanded = !expanded
    },

Accordion with Icon

LegionAccordion(
...
icon = {
      Icon(imageVector = Icons.Default.AccountCircle, contentDescription = "")
    }
...  
){
  AccordionItemContent()
}

Variants

Accordion with Divider

LegionAccordion(
...
divider = true //default false
...  
){
  AccordionItemContent()
}

Attributes

Parameters	Description	Default Value
`title`	the text showing in accordion header	N/A
`onClick`	will be called when accordion is clicked	N/A
`expanded`	Control accordion layout to animate when to display content.	false
`modifier`	the Modifier to be applied to this accordion	N/A
`colors`	color that will be used to resolve the colors used for this accordion.	N/A
`divider`	To display divider at accordion.	false
`icon`	The icon to be displayed on the right of accordion.	null
`content`	he content to be displayed on accordion	N/A

Example