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

Expander

@Composable
fun Expander(labelOpen: String, labelClosed: String, modifier: Modifier = Modifier, open: Boolean, variant: ExpanderVariant = Default, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: (Boolean) -> Unit, content: @Composable () -> Unit)

Expander component allows user to reveals and hide extra content.

It uses an animated content frame which allows users to expand and collapse secondary content. Expanders should be used when the content is not critical to most users. If there is important information it should be highlighted or exposed outside of the expander.

Expanders does not load more data but rather hides/reveals data already present in the views.

It comes with two variants ExpanderVariant.Default and ExpanderVariant.Paragraph which uses different CTA buttons to collapse/expand the content.

Parameters

labelOpen

What label should say when the content is expanded.

labelClosed

What label should say when the content is collapsed.

modifier

Modifier to be applied to the Expander

open

Default state of the content.

variant

ExpanderVariant defines the Expander styles. The default value is ExpanderVariant.Default.

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 Expander CTA is click, therefore the change of Expander state is requested.

content

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

See also

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.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Expander
import net.ikea.skapa.ui.components.ExpanderVariant

fun main() { 
   //sampleStart 
   var isParagraphOpen by remember { mutableStateOf(true) }
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space100)) {
        Text("Paragraph Expander", style = SkapaTheme.typesets.heading.headingXS)
        Text(
            "Paragraph expanders are basic variants that expand and collapse truncated text. Paragraph expanders are basic variants that " +
                "expand and collapse truncated text."
        )
        Expander(
            labelOpen = "Read less",
            labelClosed = "Read more",
            variant = ExpanderVariant.Paragraph,
            open = isParagraphOpen,
            onClick = {
                // Handle callback and change expander state
                isParagraphOpen = it
            }
        ) {
            Column {
                Spacer(
                    Modifier
                        .background(SkapaTheme.colors.neutral2)
                        .fillMaxWidth()
                        .height(SkapaSpacing.space1000)
                )
                Spacer(Modifier.height(SkapaSpacing.space200))
                Text(
                    "Paragraph expander CTAs should inherit their surrounding body text style. Use an underline and spacing to help " +
                        "them stand out."
                )
            }
        }
    }
} 
   //sampleEnd
}