Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.
import Steps from 'primevue/steps';
Steps requires a collection of menuitems as its model.
<Steps :model="items" aria-label="Form Steps" :readonly="false"
:pt="{
menuitem: ({ context }) => ({
class: isActive(context.item) && 'p-highlight p-steps-current'
})
}">
<template #item="{ label, item, index, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<span v-else v-bind="props.action">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</span>
</template>
</Steps>
In order to add interactivity to the component, disable readonly to control the Steps.
<div class="card">
<Steps
:model="items"
aria-label="Form Steps"
:pt="{
menuitem: ({ context }) => ({
class: isActive(context.item) && 'p-highlight p-steps-current'
})
}"
>
<template #item="{ label, item, index, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
</template>
</Steps>
</div>
<router-view v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as NuxtLink or router-link. Here is an example with vue-router.
<Steps :model="items" aria-label="Form Steps" :readonly="false"
:pt="{
menuitem: ({ context }) => ({
class: isActive(context.item) && 'p-highlight p-steps-current'
})
}">
<template #item="{ label, item, index, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.step">{{ index + 1 }}</span>
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</Steps>
Steps component uses the nav element and since any attribute is passed to the root implicitly aria-labelledby or aria-label can be used to describe the component. Inside an ordered list is used where the current step item defines aria-current as "step".
Key | Function |
---|---|
tab | Adds focus to the active step when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence. |
enter | Activates the focused step if readonly is not enabled. |
space | Activates the focused step if readonly is not enabled. |
right arrow | Moves focus to the next step if readonly is not enabled. |
left arrow | Moves focus to the previous step if readonly is not enabled. |
home | Moves focus to the first step if readonly is not enabled. |
end | Moves focus to the last step if readonly is not enabled. |