Biofarma | Bind UI

Stepper/Wizard

Steppers display progress through a sequence of logical and numbered steps

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Stepper Preview

Usage

To implement Stepper, you can use this tag Stepper in the Kotlin file.

    import id.co.biofarma.binduiandroid.components.stepper.Stepper

    val currentState = remember {mutableIntStateOf(0)}
    val steps = 
        listOf(
            StepperPropertiesDetail(
                value = "1",
                label = "Step 1",
                enabled = true,
                subLabel = "sub label 1",
                icon = BindIcons.Base.Lined.Box,
            ),
            StepperPropertiesDetail(
                value = "2",
                label = "Step 2",
                enabled = true,
                subLabel = "sub label 2",
                icon = BindIcons.Base.Lined.PreviewOpen,
            ),
            StepperPropertiesDetail(
                value = "3",
                label = "Step 3",
                enabled = true,
                subLabel = "sub label 3",
                icon = BindIcons.Base.Lined.Aiming,
            ),
            StepperPropertiesDetail(
                value = "4",
                label = "Disabled",
                enabled = false,
                subLabel = "",
                icon = BindIcons.Base.Lined.BalanceTwo,
            )
        )
    Stepper(
        type = "horizontal",
        steps = steps,
        currentStep = currentState.value,
        isShowLabel = true,
        isLineGap = false,
        isUseIcon = false,
        style = Modifier,
        onClick = { step ->
            currentState.value = step
        },
        colorTheme = PrimitiveColors.InnovationBlue_500,
    )

Type

Set the type prop to horizontal or vertical.

Stepper Type

Stepper with Icon

Set the isUseIcon prop to true or false.

Stepper Icon

Stepper with Gap Line

Set the isLineGap prop to true or false.

Stepper Icon

Props

Props	Required	Default	Type	description
type	false	`horizontal`	`horizontal` , `vertical`	Stepper orientation: `horizontal` or `vertical`
currentStep	false	-	`number`	The current stage active stepper item
steps	false	-	`List<value: string, label: string, icon: imageVector, enabled: boolean, subLabel: string>`	List of stepper item content
isShowLabel	false	`false`	`true` `false`	To show label text below stepper item.
isUseIcon	false	`false`	`true` `false`	Set stepper item content into icon.
isLineGap	false	`false`	`true` `false`	Gap between stepper item with line.
onClick	false	-	`() -> Unit = {}`	Callback function to run when the stepper item is clicked.
colorTheme	false	-	`color`	Set color for stepper item, when it’s active and completed
style	false	-	`modifier`	To decorate or add behavior to Compose UI elements

Rating Tabs