Jenga Step Indicator
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.
step Content Description
accessibility label for a step, given its index (e.g. "Step 2 of 3, Payment, current step").
modifier
the Modifier for the row.
on Step Click
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}" },
)Content copied to clipboard