Design/net.ikea.skapa.ui.components/QuantityStepper

QuantityStepper

fun QuantityStepper(value: Int, modifier: Modifier = Modifier, @IntRange(from = 0) minValue: Int = MinValueDefault, @IntRange(from = 0) maxValue: Int = MaxValueDefault, size: QuantityStepperSize = QuantityStepperSize.Medium, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, increaseButtonContentDescription: String?, decreaseButtonContentDescription: String?, onValueChange: (Int) -> Unit)

QuantityStepper component allows you to select an number value by increasing/decreasing that value with the button controls or writing the value directly in the input field inside the component

Parameters

value

the value to display.

modifier

Modifier to be applied to the component

minValue

minimum value allowed, range between 0 to INT.MAX_VALUE. The default value is 1.

maxValue

maximum value allowed, range between 0 to INT.MAX_VALUE. The default value is 9999.

size

QuantityStepperSize defines the overall size of the component. The default value is QuantityStepperSize.Medium

enabled

defines if the component is enabled

interactionSource

The MutableInteractionSource representing the stream of Interactions for this QuantityStepper. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this component in different Interactions.

increaseButtonContentDescription

text used by accessibility services to describe what this increase button does. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar.

decreaseButtonContentDescription

text used by accessibility services to describe what this decrease button does. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar.

onValueChange

the callback that is triggered when the input service updates the value, either from the buttons or the input field. An updated text comes as a parameter of the callback

Samples

import android.widget.Toast
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.QuantityStepper
import net.ikea.skapa.ui.components.QuantityStepperActions
import net.ikea.skapa.ui.components.QuantityStepperSize

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)) {
        var value by remember { mutableIntStateOf(0) }
        // Simple Quantity Stepper setup
        QuantityStepper(
            value = value,
            size = QuantityStepperSize.Small,
            maxValue = 9999,
            increaseButtonContentDescription = "Increase",
            decreaseButtonContentDescription = "Decrease",
            onValueChange = { newValue ->
                /* Do something when the value change, can be trigger by any of the inputs*/
                value = newValue
            }
        )
        val context = LocalContext.current
        // Quantity Stepper setup listening to every input event
        QuantityStepper(
            value = value,
            decreaseButtonContentDescription = "Decrease",
            increaseButtonContentDescription = "Increase",
            modifier = Modifier.fillMaxWidth(),
            size = QuantityStepperSize.Medium,
            maxValue = 20,
            enabled = true,
            // Ime actions can be configured
            imeAction = ImeAction.Done,
            keyboardActions = KeyboardActions(
                onDone = {
                    Toast.makeText(context, "Done", Toast.LENGTH_SHORT).show()
                }
            ),
            quantityStepperActions = QuantityStepperActions(
                onDecrease = {
                    // Value updated from minus button
                    Toast.makeText(context, "Decrease value: $it", Toast.LENGTH_SHORT).show()
                },
                onIncrease = {
                    // Value updated from plus button
                    Toast.makeText(context, "Increase value: $it", Toast.LENGTH_SHORT).show()
                },
                onInputValueChange = {
                    // Value updated from input field
                    Toast.makeText(context, "New input value: $it", Toast.LENGTH_SHORT).show()
                }
            )
        ) {
            value = it
            Toast.makeText(context, "Value updated by from buttons or input field: $it", Toast.LENGTH_SHORT).show()
        }
    }
} 
   //sampleEnd
}

@Composable

fun QuantityStepper(value: Int, decreaseButtonContentDescription: String?, increaseButtonContentDescription: String?, modifier: Modifier = Modifier, @IntRange(from = 0) minValue: Int = MinValueDefault, @IntRange(from = 0) maxValue: Int = MaxValueDefault, size: QuantityStepperSize = QuantityStepperSize.Medium, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, imeAction: ImeAction = ImeAction.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, quantityStepperActions: QuantityStepperActions = QuantityStepperActions.Default, onValueChange: (Int) -> Unit)

QuantityStepper component allows you to select an number value by increasing/decreasing that value with the button controls or writing the value directly in the input field inside the component.

Parameters

value

the value to display.

modifier

Modifier to be applied to the component

minValue

minimum value allowed, range between 0 to INT.MAX_VALUE. The default value is 1.

maxValue

maximum value allowed, range between 0 to INT.MAX_VALUE. The default value is 9999.

size

QuantityStepperSize defines the overall size of the component. The default value is QuantityStepperSize.Medium

enabled

defines if the component is enabled

interactionSource

increaseButtonContentDescription

decreaseButtonContentDescription

imeAction

The IME action. This IME action is honored by keyboard and may show specific icons on the keyboard. For example, send icon may be shown if ImeAction.Send is specified. Default imeAction is ImeAction.Default. Is recommended that this action correspond to the keyboardActions you had specify.

keyboardActions

when the input service emits an IME action, the corresponding callback is called. Note that this IME action may be different from what you specified in KeyboardOptions.imeAction.

quantityStepperActions

The QuantityStepperActions class allows callbacks that will be triggered in response to users triggering specific actions on the QuantityStepper component.

onValueChange

the callback that is triggered when the input service updates the value, either from the buttons or the input field. An updated text comes as a parameter of the callback. Values outside the valid range will also trigger callback. Empty field not trigger callbacks. If the fields looses focus with a value outside the valid range will force update the value. Empty and values below minValue will be corrected to minValue and values above maxValue will be corrected to maxValue.

Samples

import android.widget.Toast
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.QuantityStepper
import net.ikea.skapa.ui.components.QuantityStepperActions
import net.ikea.skapa.ui.components.QuantityStepperSize

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)) {
        var value by remember { mutableIntStateOf(0) }
        // Simple Quantity Stepper setup
        QuantityStepper(
            value = value,
            size = QuantityStepperSize.Small,
            maxValue = 9999,
            increaseButtonContentDescription = "Increase",
            decreaseButtonContentDescription = "Decrease",
            onValueChange = { newValue ->
                /* Do something when the value change, can be trigger by any of the inputs*/
                value = newValue
            }
        )
        val context = LocalContext.current
        // Quantity Stepper setup listening to every input event
        QuantityStepper(
            value = value,
            decreaseButtonContentDescription = "Decrease",
            increaseButtonContentDescription = "Increase",
            modifier = Modifier.fillMaxWidth(),
            size = QuantityStepperSize.Medium,
            maxValue = 20,
            enabled = true,
            // Ime actions can be configured
            imeAction = ImeAction.Done,
            keyboardActions = KeyboardActions(
                onDone = {
                    Toast.makeText(context, "Done", Toast.LENGTH_SHORT).show()
                }
            ),
            quantityStepperActions = QuantityStepperActions(
                onDecrease = {
                    // Value updated from minus button
                    Toast.makeText(context, "Decrease value: $it", Toast.LENGTH_SHORT).show()
                },
                onIncrease = {
                    // Value updated from plus button
                    Toast.makeText(context, "Increase value: $it", Toast.LENGTH_SHORT).show()
                },
                onInputValueChange = {
                    // Value updated from input field
                    Toast.makeText(context, "New input value: $it", Toast.LENGTH_SHORT).show()
                }
            )
        ) {
            value = it
            Toast.makeText(context, "Value updated by from buttons or input field: $it", Toast.LENGTH_SHORT).show()
        }
    }
} 
   //sampleEnd
}

QuantityStepper

Parameters

See also

Samples

Parameters

See also

Samples