← Back to Wear Material
Stepper
Component
in
Wear Material
. Since 1.0.0Overview
Examples
Community Notes
@Composable
fun StepperSample() {
var value by remember { mutableStateOf(2f) }
Stepper(
value = value,
onValueChange = { value = it },
valueRange = 1f..4f,
increaseIcon = { Icon(StepperDefaults.Increase, "Increase") },
decreaseIcon = { Icon(StepperDefaults.Decrease, "Decrease") },
steps = 7
) { Text("Value: $value") }
}
@Composable
fun StepperWithoutRangeSemanticsSample() {
var value by remember { mutableStateOf(2f) }
Stepper(
value = value,
onValueChange = { value = it },
valueRange = 1f..4f,
increaseIcon = { Icon(StepperDefaults.Increase, "Increase") },
decreaseIcon = { Icon(StepperDefaults.Decrease, "Decrease") },
steps = 7,
enableRangeSemantics = false
) { Text("Value: $value") }
}
@Composable
fun StepperWithCustomSemanticsSample() {
var value by remember { mutableStateOf(2f) }
val valueRange = 1f..4f
val onValueChange = { i: Float -> value = i }
val steps = 7
Stepper(
value = value,
onValueChange = onValueChange,
valueRange = valueRange,
modifier = Modifier.customSemantics(value, true, onValueChange, valueRange, steps),
increaseIcon = { Icon(StepperDefaults.Increase, "Increase") },
decreaseIcon = { Icon(StepperDefaults.Decrease, "Decrease") },
steps = steps,
enableRangeSemantics = false
) { Text("Value: $value") }
}
@Composable
fun StepperWithIntegerSample() {
var value by remember { mutableStateOf(2) }
Stepper(
value = value,
onValueChange = { value = it },
increaseIcon = { Icon(StepperDefaults.Increase, "Increase") },
decreaseIcon = { Icon(StepperDefaults.Decrease, "Decrease") },
valueProgression = 1..10
) { Text("Value: $value") }
}
@Composable
fun StepperSample() {
var value by remember { mutableStateOf(2f) }
Stepper(
value = value,
onValueChange = { value = it },
valueRange = 1f..4f,
increaseIcon = { Icon(StepperDefaults.Increase, "Increase") },
decreaseIcon = { Icon(StepperDefaults.Decrease, "Decrease") },
steps = 7
) { Text("Value: $value") }
}
@Composable
fun StepperWithIntegerSample() {
var value by remember { mutableStateOf(2) }
Stepper(
value = value,
onValueChange = { value = it },
increaseIcon = { Icon(StepperDefaults.Increase, "Increase") },
decreaseIcon = { Icon(StepperDefaults.Decrease, "Decrease") },
valueProgression = 1..10
) { Text("Value: $value") }
}
Previous Component← SplitToggleChip
Next ComponentSwipeToDismissBox →