import Steps from 'primevue/steps';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/steps/steps.min.js"></script>
Steps uses the common MenuModel API to define the items, visit
Steps is integrated with Vue Router and requires a collection of menuitems as its model.
<Steps :model="items" />
<router-view />
export default {
data() {
return {
items: [{
label: 'Personal',
to: '/steps'
},
{
label: 'Seat',
to: '/steps/seat'
},
{
label: 'Payment',
to: '/steps/payment'
},
{
label: 'Confirmation',
to: '/steps/confirmation'
}]
}
}
}
Items are readonly by default, if you'd like to make them interactive then disable readonly property.
<Steps :model="items" :readonly="false" />
<router-view />
Steps offers content customization with the item template that receives the menuitem instance from the model as a parameter.
<Steps :model="items">
<template #item="{item}">
<a :href="item.url">{{item.label}}</a>
</template>
</Steps>
router-link with route configuration can also be used within templating for further customization.
<Steps :model="items">
<template #item="{item}">
<router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}">
<a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}>{{route.fullPath}}</a>
</router-link>
</template>
</Steps>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | null | Unique identifier of the element. |
| model | array | null | An array of menuitems. |
| readonly | boolean | true | Whether the items are clickable or not. |
| exact | boolean | true | Whether to apply 'router-link-active-exact' class if route exactly matches the item path. |
| Name | Parameters |
|---|---|
| item | item: Menuitem instance |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-steps | Container element. |
| p-steps-list | Root list element. |
| p-steps-current | Current menuitem element. |
| p-menuitem-link | Link element of the menuitem. |
| p-steps-item | Menuitem element. |
| p-steps-number | Number of menuitem. |
| p-steps-title | Label of menuitem. |
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. |
None.