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) |