Accordion

accordion

An element that allows to toggle between hiding and showing a large amount of content.

Usage

accordion

val isOpen = remember { mutableStateOf(false)}

XelaAccordion(
    title = "Accordion 1",
    rightIconClose= R.drawable.ic_circle_minus,
    rightIconOpen = R.drawable.ic_circle_plus,
    isOpen = isOpen
) {
    Text(
        text = "Placeholder content for this accordion. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.",
        style = xelaSmallBody,
        color = XelaColor.Gray3
    )
}

Properties

Name Type Default Value Required Description
title String - YES Title for accordion
isOpen MutableState remember { mutableStateOf(false)} NO MutableState value for open or close accordion
leftIconOpen Int? null NO Left Open Icon name from Drawable
leftIconClose Int? null NO Left Close Icon name from Drawable
rightIconOpen Int? null NO Right Open Icon name from Drawable
rightIconClose Int? null NO Right Close Icon name from Drawable
backgroundOpen Color XelaColor.Gray12 NO Background for Open accordion
backgroundClose Color XelaColor.Gray12 NO Background for Close accordion
titleColorOpen Color XelaColor.Gray2 NO Title Color for Open accordion
titleColorClose Color XelaColor.Gray2 NO Title Color for Close accordion
dividerColor Color XelaColor.Gray11 NO Divider Color for accordion
iconsSize Dp 24.dp NO Size for open and close icon
content @Composable () -> Unit - YES Content for accordion