Flux

Appearance

Stepper ​

Steppers serve as a user-friendly navigation tool, expertly guiding individuals through a process via clearly marked numbered steps, fostering a seamless and intuitive progression.

Step 1

Props

model-value?: number
The index of the current step.

Emits

update:model-value: [number]
Triggered when the visible view changes.

Slots

default
The content of each step. Each child is treated as a separate step.

steps ({
    activate(index: number): void;
    readonly modelValue: number;
    readonly steps: number;
})
The steps of the stepper.

content ({
    activate(index: number): void;
    readonly children: VNode[];
    readonly isTransitioningBack: boolean;
    readonly modelValue: number;
    readonly steps: number;
    readonly view: VNode;
})
The content of the current step.

Examples ​

Basic

A basic stepper.

1. Your details

[[ form ]]

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxStepper v-model="step">
                <FluxStepperStep class="mt">
                    <h2>1. Your details</h2>
                    <p>[[ form ]]</p>
                </FluxStepperStep>

                <FluxStepperStep class="mt">
                    <h2>2. Company details</h2>
                    <p>[[ form ]]</p>
                </FluxStepperStep>

                <FluxStepperStep class="mt">
                    <h2>3. Validation</h2>
                    <p>[[ form ]]</p>
                </FluxStepperStep>
            </FluxStepper>
        </FluxPaneBody>

        <FluxPaneFooter>
            <FluxSpacer/>

            <FluxSecondaryButton
                :disabled="step === 0"
                label="Back"
                @click="step--"/>

            <FluxPrimaryButton
                :disabled="step === 2"
                icon-before="circle-check"
                label="Next"
                @click="step++"/>
        </FluxPaneFooter>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxPaneFooter, FluxPrimaryButton, FluxSecondaryButton, FluxSpacer, FluxStepper, FluxStepperStep } from '@flux-ui/components';
    import { ref } from 'vue';

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

<style
    scoped
    lang="css">
    h2 {
        margin-top: 0;
        border-top: none;
    }
</style>

Custom steps

Override the `steps` slot to render labelled buttons instead of the default dot indicator.

Profile

Tell us a bit about yourself.

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxStepper v-model="step">
                <template #steps="{activate, modelValue, steps}">
                    <FluxStack
                        direction="horizontal"
                        is-fill
                        :gap="9">
                        <FluxSecondaryButton
                            v-for="index in steps"
                            :key="index - 1"
                            :label="`${index}. ${titles[index - 1]}`"
                            :is-filled="(index - 1) === modelValue"
                            @click="activate(index - 1)"/>
                    </FluxStack>
                </template>

                <FluxStepperStep class="mt">
                    <h2>{{ titles[0] }}</h2>
                    <p>Tell us a bit about yourself.</p>
                </FluxStepperStep>

                <FluxStepperStep class="mt">
                    <h2>{{ titles[1] }}</h2>
                    <p>Configure the workspace settings.</p>
                </FluxStepperStep>

                <FluxStepperStep class="mt">
                    <h2>{{ titles[2] }}</h2>
                    <p>You're all set.</p>
                </FluxStepperStep>
            </FluxStepper>
        </FluxPaneBody>

        <FluxPaneFooter>
            <FluxSpacer/>

            <FluxSecondaryButton
                :disabled="step === 0"
                label="Back"
                @click="step--"/>

            <FluxPrimaryButton
                :disabled="step === 2"
                icon-before="circle-check"
                label="Next"
                @click="step++"/>
        </FluxPaneFooter>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxPaneFooter, FluxPrimaryButton, FluxSecondaryButton, FluxSpacer, FluxStack, FluxStepper, FluxStepperStep } from '@flux-ui/components';
    import { ref } from 'vue';

    const step = ref(0);
    const titles = ['Profile', 'Workspace', 'Done'];
</script>

<style
    scoped
    lang="css">
    h2 {
        margin-top: 0;
        border-top: none;
    }
</style>

Used components ​