Flux

Appearance

Stepper steps ​

The stepper steps component displays the list of steps available in the stepper, showing users where they are in the overall process. It acts as a navigation layer, allowing users to understand their current position and progress while also offering a clear overview of what comes next.

Required icons

check

Props

amount: number
The amount of steps.

current: number
The current step.

Emits

activate: [number]
Triggered when step is clicked

Examples ​

Basic

A basic stepper steps.

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxStepperSteps
                :amount="4"
                :current="current + 1"
                @activate="current = $event"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxStepperSteps } from '@flux-ui/components';
    import { ref } from 'vue';

    const current = ref(0);
</script>

Used components ​