search

Xsims / compose-material-stepper

26 stars 4 forks source link

readme

Stepper Material with Compose

Jitpack Medium Twitter Youtube

Stepper Compose is a Composable UI library based on Jetpack Compose and designed following Material Guidelines.


Create classic material Stepper

Stepper(
      steps = List(8) { index ->
        Step(
          title = "Name of step ${index + 1}",
          subtitle = "Subtitle of step ${index + 1}"
        ) {
          Box(
            modifier = Modifier
              .height(250.dp)
              .fillMaxWidth()
              .background(color = Black38)
          )
        }
      }
    )

The Stepper includes state management on each step (TODO, LOADING, ERROR, COMPLETE) letting you the possibility to update each step easily.


TODO LOADING ERROR COMPLETE

Managing state with Stepper

Step(
  title = "My Step",
  state = state,
) {
when (state.value) {
    TODO -> Button(onClick = { 
    state.value = LOADING 
    triggerErrorAfterMillis(2000) }) { 
      Text("CLICK") 
    }

    LOADING -> CircularProgressIndicator()

    ERROR -> Button(onClick = { 
    state.value = COMPLETE
    nextStep() }) { 
      Text("RETRY") 
    }

    COMPLETE -> Text("Complete")
  }
}

Tech stack & Open-source libraries