Tab stepper

Component

Props

Usage

modelValue

Sets the current step. The steps starts always with the value 1 by default.

 <template>
    <TabStepper v-model="currentStep" />
</template>
<script setup lang="ts">
const currentStep = ref(1)
</script>
 

• Type: number
• Default: 1

steps

Sets the steps. The steps are an array of objects which uses the TabStep interface.

 <template>
    <TabStepper :steps="steps" />
</template>
<script setup lang="ts">
const steps: TabStep[] = [
    {
        title: "Step 1",
        description: "Description one",
    },
    {
        title: "Step 2",
        description: "Description two",
    },
    {
        title: "Step 3",
        description: "Description three",
    },
]
</script>
 

TypeScript interface

 interface TabStep {
    title: string
    description?: string
    icon?: string
}
 

The icon property is usefull when the type is ICON. Otherwise, it is ignored even if it passed in the array.

type

Sets the type of the step indicators. Uses the StepIndicatorType enum.

 <template>
    <TabStepper :type="StepIndicatorType.NUMBER" />
</template>
 

• Type: StepIndicatorType
• Default: StepIndicatorType.NUMBER

Options

completedIcon

Sets the icon to be displayed when the step is completed.

 <template>
    <TabStepper completedIcon="mdi:check" />
</template>
 

• Type: string
• Default: mdi:check

isInteractive

Sets if the step indicator is interactive. If it is, the user can click on the step to go to the step. As a result, it will also update the ref asigned to the v-model.

In case of having the value false, nothing will happen.

 <template>
    <TabStepper :isInteractive="false" />
</template>
 

• Type: boolean
• Default: false

hasDivider

Sets if the chevron divider is displayed, which will be shown between the steps.

 <template>
    <TabStepper hasDivider />
</template>
 

• Type: boolean
• Default: true

justifySteps

Justify the spacing between the steps in order to distribute the items along the available space.

 <template>
    <TabStepper :justifySteps="false" />
</template>
 

• Type: boolean
• Default: false

isFullWidth

Sets if the component will be displayed as a full width component. It will take the full width of the parent element. Otherwise, it will fit to the content.

 <template>
    <TabStepper :isFullWidth="true" />
</template>
 

• Type: boolean
• Default: true