Accordion
The accordion component that allows users to expand and collapse content sections. It is commonly used to display a large amount of information in a compact space, making it easier for users to scan and consume content.
| Type | Resource |
|---|---|
| Design | Figma |
| Mobile | Mobile Storybook |
| Code | Gitlab |
Usage
import id.co.biofarma.binduiandroid.components.accordion.Accordionval items = remember {
mutableStateListOf(
AccordionItem(title = "List Item",
content = "Content for section")
)
}
Accordion(
items = items,
type = "default",
onToggle = { index ->
items[index] = items[index].copy(isExpanded = !items[index].isExpanded)
}
)Examples
Type (optional)
Use type default, border, or background to add content to the accordion type.
Mode (optional)
Use mode dark or light to use acordion mode.
Props
| Props | Required | Default | Type | description |
|---|---|---|---|---|
| items | true | - | List<title: String, content: String, isExpanded: Boolean> | The list of items containing a title and content for the accordion. |
| type | false | default | default, border, background | The visual style variant of the accordion. |
| onToggle | false | - | (Int) -> Unit | The callback is triggered when clicking expand and collapse. |
| style | false | - | Modifier | Custom styles for the accordion component. |