Stepper

StepperSample

@Sampled
@Composable
fun StepperSample() {
    var value by remember { mutableFloatStateOf(2f) }
    val valueRange = remember { 0f..4f }
    Box(modifier = Modifier.fillMaxSize()) {
        Stepper(
            value = value,
            onValueChange = { value = it },
            valueRange = valueRange,
            steps = 7,
            decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) },
            increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) },
        ) {
            Text(String.format("Value: %.1f".format(value)))
        }
        StepperLevelIndicator(
            value = { value },
            valueRange = valueRange,
            modifier = Modifier.align(Alignment.CenterStart),
        )
    }
}

StepperWithRangeSemanticsSample

@Sampled
@Composable
fun StepperWithRangeSemanticsSample() {
    var value by remember { mutableFloatStateOf(2f) }
    val valueRange = remember { 0f..4f }
    val onValueChange = { i: Float -> value = i }
    val steps = 7
    Box(modifier = Modifier.fillMaxSize()) {
        Stepper(
            value = value,
            onValueChange = onValueChange,
            valueRange = valueRange,
            modifier = Modifier.rangeSemantics(value, true, onValueChange, valueRange, steps),
            steps = steps,
            decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) },
            increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) },
        ) {
            Text("Value: $value")
        }
        StepperLevelIndicator(
            value = { value },
            valueRange = valueRange,
            modifier = Modifier.align(Alignment.CenterStart),
        )
    }
}

StepperWithButtonSample

@Sampled
@Composable
fun StepperWithButtonSample() {
    var value by remember { mutableFloatStateOf(2f) }
    val valueRange = remember { 0f..4f }
    Box(modifier = Modifier.fillMaxSize()) {
        Stepper(
            value = value,
            onValueChange = { value = it },
            valueRange = valueRange,
            increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) },
            decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) },
            steps = 7,
        ) {
            Text(String.format("Value: %.1f".format(value)))
            Button(
                onClick = {},
                modifier = Modifier.width(150.dp),
                label = { Text(text = "This watch", modifier = Modifier.fillMaxWidth()) },
                secondaryLabel = { Text(text = "Headphones", modifier = Modifier.fillMaxWidth()) },
                icon = { HeadphoneIcon(24.dp) },
            )
        }
        StepperLevelIndicator(
            value = { value },
            valueRange = valueRange,
            modifier = Modifier.align(Alignment.CenterStart),
        )
    }
}

StepperWithIntegerSample

@Sampled
@Composable
fun StepperWithIntegerSample() {
    var value by remember { mutableIntStateOf(3) }
    val valueProgression = remember { 0..10 }
    Box(modifier = Modifier.fillMaxSize()) {
        Stepper(
            value = value,
            onValueChange = { value = it },
            valueProgression = valueProgression,
            decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) },
            increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) },
        ) {
            Text(String.format("Value: %d".format(value)))
        }
        StepperLevelIndicator(
            value = { value },
            valueProgression = valueProgression,
            modifier = Modifier.align(Alignment.CenterStart),
        )
    }
}