Design/net.ikea.skapa.ui.components/Accordion

Accordion

fun Accordion(title: String, modifier: Modifier = Modifier, leadingImage: ListViewItemImage = ListViewItemImage.None, caption: String? = null, open: Boolean = false, size: AccordionSize = AccordionSize.Medium, textStyle: AccordionTextStyle = AccordionTextStyle.Emphasised, showDivider: Boolean = true, headerHorizontalPadding: Dp = SkapaSpacing.space150, contentHorizontalPadding: Dp = SkapaSpacing.space150, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: (open: Boolean) -> Unit, content: @Composable () -> Unit)(source)

Accordion component is usually used as a list of headers that hide or reveal additional content when selected.

It uses an animated content frame which allows users to expand and collapse secondary content. Use accordions to create an overview by gathering related information. Scanning an accordion is easier when the design pattern is consistent.

The accordion is designed to help the user to get a quick and clear overview of information. Treat headlines as proper headlines to keep the character count low.

Note: This function uses caption as a String for simplicity.

Parameters

title

The primary text of the accordion

modifier

Modifier to be applied to the accordion

leadingImage

The leading supporting visual of the Accordion

caption

The caption of the accordion is usually used as an item description.

open

Current open state of the content.

size

AccordionSize defines the minimum height of the accordion.

textStyle

Dictates whether the title is regular with AccordionTextStyle.Subtle or bold with AccordionTextStyle.Emphasised.

showDivider

whether a divider is shown above the title, default is true.

headerHorizontalPadding

The padding applied to the title, caption, and divider of the accordion.

contentHorizontalPadding

The padding applied to the content of the accordion.

enabled

whether the component is enabled or grayed out.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this component. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this component in different Interactions.

onClick

callback trigger when the Accordion CTA is click, therefore the change of Accordion state is requested.

content

The content that should be shown when the component is in open state.

Samples

import androidx.compose.foundation.background
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Accordion
import net.ikea.skapa.ui.components.AccordionSize
import net.ikea.skapa.ui.components.AccordionTextStyle
import net.ikea.skapa.ui.components.ListViewItemImage

fun main() { 
   //sampleStart 
   var isOpen by remember { mutableStateOf(true) }
SkapaTheme2(isSystemInDarkTheme()) {
    Accordion(
        title = "Title",
        caption = "Caption",
        size = AccordionSize.Medium,
        open = isOpen,
        textStyle = AccordionTextStyle.Subtle,
        onClick = {
            // Handle callback and change accordion state
            isOpen = it
        },
        leadingImage = ListViewItemImage.Icon(
            resource = R.drawable.ic_image_fallback_image,
            contentDescription = "",
            tint = Color.Unspecified,
            alignment = Alignment.CenterVertically
        )
    ) {
        Column {
            Box(
                Modifier
                    .background(SkapaTheme.colors.staticIKEABrandBlue)
                    .fillMaxWidth()
                    .height(SkapaSpacing.space1000)
            )
            Spacer(Modifier.height(SkapaSpacing.space200))
            Text(
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, " +
                    "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            )
        }
    }
} 
   //sampleEnd
}

@Composable

fun Accordion(title: String, modifier: Modifier = Modifier, leadingImage: ListViewItemImage = ListViewItemImage.None, annotatedCaption: AnnotatedString? = null, open: Boolean = false, size: AccordionSize = AccordionSize.Medium, textStyle: AccordionTextStyle, showDivider: Boolean = true, headerHorizontalPadding: Dp = SkapaSpacing.space150, contentHorizontalPadding: Dp = SkapaSpacing.space150, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: (open: Boolean) -> Unit, content: @Composable () -> Unit)(source)

Accordion component is usually used as a list of headers that hide or reveal additional content when selected.

Note: Skapa team does not recommend doing significant changes on caption style, use annotatedCaption with caution.

The accordion is designed to help the user to get a quick and clear overview of information. Treat headlines as proper headlines to keep the character count low.

Note: This is the most customizable function uses annotatedCaption as an AnnotatedString to allow more flexibility.

Parameters

title

The primary text of the accordion

modifier

Modifier to be applied to the accordion

leadingImage

The leading supporting visual of the Accordion

annotatedCaption

AnnotatedString The caption of the accordion is usually used as an item description.

open

Current open state of the content.

size

AccordionSize defines the minimum height of the accordion.

textStyle

Dictates whether the title is regular with AccordionTextStyle.Subtle or bold with AccordionTextStyle.Emphasised.

showDivider

whether a divider is shown above the title, default is true.

headerHorizontalPadding

The padding applied to the title, caption, and divider of the accordion.

contentHorizontalPadding

The padding applied to content of the accordion.

enabled

whether the component is enabled or grayed out.

interactionSource

onClick

callback trigger when the Accordion CTA is click, therefore the change of Accordion state is requested.

content

The content that should be shown when the component is in open state.

Samples

import androidx.compose.foundation.background
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Accordion
import net.ikea.skapa.ui.components.AccordionSize
import net.ikea.skapa.ui.components.AccordionTextStyle
import net.ikea.skapa.ui.components.ListViewItemImage

fun main() { 
   //sampleStart 
   var isOpen by remember { mutableStateOf(true) }
SkapaTheme2(isSystemInDarkTheme()) {
    Accordion(
        title = "Title",
        caption = "Caption",
        size = AccordionSize.Medium,
        open = isOpen,
        textStyle = AccordionTextStyle.Subtle,
        onClick = {
            // Handle callback and change accordion state
            isOpen = it
        },
        leadingImage = ListViewItemImage.Icon(
            resource = R.drawable.ic_image_fallback_image,
            contentDescription = "",
            tint = Color.Unspecified,
            alignment = Alignment.CenterVertically
        )
    ) {
        Column {
            Box(
                Modifier
                    .background(SkapaTheme.colors.staticIKEABrandBlue)
                    .fillMaxWidth()
                    .height(SkapaSpacing.space1000)
            )
            Spacer(Modifier.height(SkapaSpacing.space200))
            Text(
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, " +
                    "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            )
        }
    }
} 
   //sampleEnd
}

Accordion

Parameters

See also

Samples

Parameters

See also

Samples