Steps

Is a component that presents a sequence that leads the user through well-defined steps. This can be used for a variety of registration forms, where you don't want to scare the user with loads of fields and questions.

Usage

val currentStepId = remember { mutableStateOf(1) }

Column(
    modifier = Modifier
        .padding(24.dp),
    verticalArrangement = Arrangement.spacedBy(24.dp)
) {

    val steps: MutableList<XelaStepItem> = remember {
        mutableStateListOf<XelaStepItem>(
            XelaStepItem(
                id = 1,
                title = "Step 1",
                caption = "Basic information",
                _state = XelaStepsState.ACTIVE
            ),
            XelaStepItem(id = 2, title = "Step 2", caption = "User management"),
            XelaStepItem(id = 3, title = "Step 3", caption = "Fleet settings"),
            XelaStepItem(id = 4, title = "Step 4", caption = "Confirmation")
        )
    }


    XelaSteps(
        steps = steps,
        orientation = XelaStepsOrientation.VERTICAL,
        primaryAccentColor = XelaColor.Green2,
        secondaryAccentColor = XelaColor.Green10,
        primaryTextColor = XelaColor.Gray2,
        secondaryTextColor = XelaColor.Gray7,
        secondaryColor = XelaColor.Gray11,
        errorColor = XelaColor.Red3,
        iconColor = Color.White,
        lines = true
    )

    Row(modifier = Modifier.fillMaxWidth()) {

        Spacer(modifier = Modifier.weight(1f))
        XelaButton(
            text = "Continue",
            size = XelaButtonSize.MEDIUM,
            rightIcon = R.drawable.ic_arrow_right,
            background = XelaColor.Green2,
            foregroundColor = Color.White,
            onClick = {
                steps[currentStepId.value - 1].state = XelaStepsState.COMPLETED
                if (currentStepId.value == 3) {
                    steps[currentStepId.value - 1].state = XelaStepsState.ERROR
                } else if (currentStepId.value < steps.size) {
                    currentStepId.value += 1
                    steps[currentStepId.value - 1].state = XelaStepsState.ACTIVE
                }
            }
        )

    }
}

Properties XelaSteps

Name	Type	Default Value	Required	Description
steps	MutableList<XelaStepItem>	-	YES	Array steps items
orientation	XelaStepsOrientation	XelaStepsOrientation.VERTICAL	NO	Steps orientation (HORIZONTAL, VERTICAL)
primaryTextColor	Color	XelaColor.Gray3	NO	Primary text color
secondaryTextColor	Color	XelaColor.Gray7	NO	Secondary text color
primaryAccentColor	Color	XelaColor.Blue3	NO	Primary accent color
secondaryAccentColor	Color	XelaColor.Blue11	NO	Secondary accent color
secondaryColor	Color	XelaColor.Gray11	NO	Secondary color
errorColor	Color	XelaColor.Red3	NO	Error color
iconColor	Color	Color.White	NO	Icon color
lines	Boolean	true	NO	Show lines between steps

Properties XelaStepsItem

Name	Type	Default Value	Required	Description
id	Int	-	YES	Step Item ID
title	String		NO	Step Item title text
caption	String		NO	Step Item caption text
_state	XelaStepsState	XelaStepsState.DEFAULT	NO	Step Item state (DEFAULT, COMPLETED, ACTIVE, ERROR)