JengaStepIndicator

fun JengaStepIndicator(steps: List<JengaStep>, stepContentDescription: (index: Int, step: JengaStep) -> String, modifier: Modifier = Modifier, onStepClick: (index: Int) -> Unit? = null, colors: JengaStepIndicatorColors = JengaStepIndicatorDefaults.colors())(source)

A horizontal row of steps joined by lines, with a label under each step, for multi-step flows such as sign-up, verification or checkout.

A line is drawn in the active color once the step on its left is done and the next one has been reached (done, current or locked).

Parameters

steps

the steps, in order.

stepContentDescription

accessibility label for a step, given its index (e.g. "Step 2 of 3, Payment, current step").

modifier

the Modifier for the row.

onStepClick

called with a step's index when it is tapped; null makes the steps not tappable. Which taps to act on is up to the caller.

colors

the color set; defaults to JengaStepIndicatorDefaults.colors.

Samples

val steps = listOf(
    JengaStep(
        label = "Details",
        state = JengaStepState.Done,
    ),
    JengaStep(
        label = "Choices",
        state = JengaStepState.Current,
    ),
    JengaStep(
        label = "Review",
        state = JengaStepState.Pending,
    ),
)
JengaStepIndicator(
    steps = steps,
    stepContentDescription = { index, step -> "Step ${index + 1} of ${steps.size}, ${step.label}" },
)