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" />
In order to add interactivity to the component, disable readonly to control the Steps.
<div class="card">
<Steps :model="items" aria-label="Form 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>
Following is the list of structural style classes, for theming classes visit theming page.
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. |