Steps
The Steps component allows you to create a wizard or easily break your process steps into multiple steps. Breaking things down into multiple steps can improve the user experience by keeping them small and accessible compared to listing them all at once.
Examples
Base
Variants
Different styles can be achieved with the variant
prop. The variant
prop can be set on the Steps
as well as on the StepItem
component.
Sizes
The component can be displayed in different sizes using the size
prop.
Customise
Vertical
Adding the vertical
prop displays the component vertically instead of horizontally.
Steps Component
Responsive horizontal process steps.
html
<o-steps></o-steps>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
activateOnFocus | Set the step active on navigation focus | boolean | - | false |
animateInitially | Apply animation on the initial render | boolean | - | From config: steps: { |
animated | Step navigation is animated | boolean | - | From config: steps: { |
animation | Transition animation name | [string, string, string, string] | [string, string] | [next , prev] , [right , left , down , up] | From config: steps: { |
ariaLabel | Accessibility aria-label to be passed to the tablist wrapper element | string | - | From config: steps: { |
ariaNextLabel | Accessibility next button aria label | string | - | From config: steps: { |
ariaPreviousLabel | Accessibility previous button aria label | string | - | From config: steps: { |
hasNavigation | Show next and previous buttons below the component | boolean | - | true |
iconNext | Icon to use for navigation button | string | - | From config: steps: { |
iconPack | Icon pack to use for the navigation | string | mdi , fa , fas and any other custom icon pack | From config: steps: { |
iconPrev | Icon to use for navigation button | string | - | From config: steps: { |
labelPosition | Position of the marker label | "bottom" | "left" | "right" | bottom , right , left | From config: steps: { |
mobileBreakpoint | Mobile breakpoint as max-width value | string | - | From config: steps: { |
v-model | The selected item value, use v-model to make it two-way binding | string|number|object | - | |
options | Steps options, unnecessary when default slot is used | OptionsProp<unknown> | - | |
override | Override existing theme classes completely | boolean | - | |
position | Position of the step | "centered" | "left" | "right" | left , centered , right | |
rounded | Rounded step markers | boolean | - | true |
size | Step size | string | small , medium , large | From config: steps: { |
variant | Color variant of the control | string | primary , info , success , warning , danger , and any other custom color | From config: steps: { |
vertical | Show step in vertical layout | boolean | - | false |
Events
Event name | Properties | Description |
---|---|---|
update:model-value | value unknown - updated modelValue prop | modelValue prop two-way binding |
change | value unknown - new step valuevalue unknown - old step value | on step change event |
Slots
Name | Description | Bindings |
---|---|---|
default | Place step items here | |
navigation | Override step navigation | previous {disabled: boolean, action: (): void } - previous button configsnext {disabled: boolean, action: (): void } - next button configs |
StepItem Component
An step item used by the steps component.
html
<o-step-item></o-step-item>
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
clickable | Item can be used directly to navigate. By default, previous steps are clickable while the others are not. | boolean | - | |
component | Component to be injected | Component | - | |
content | Text content, unnecessary when default slot is used | string | - | |
disabled | Item will be disabled | boolean | - | false |
events | Events to be binded to the injected component | {} | - | |
icon | Step marker icon | string | - | From config: steps: { |
iconPack | Icon pack | string | - | From config: steps: { |
label | Item label | string | - | |
override | Override existing theme classes completely | boolean | - | |
props | Props to be binded to the injected component | any | - | |
step | Step marker content (when there is no icon) | Numberish | - | |
value | Item value (it will be used as the v-model of the wrapper component) - default is an uuid | string|number|object | - | |
variant | Color variant of the control. This will override parent variant. Could be used to set a completed step to "success" for example. | string | primary , info , success , warning , danger , and any other custom color | |
visible | Show/hide item | boolean | - | true |
Events
Event name | Properties | Description |
---|---|---|
activate | on step item activate event | |
deactivate | on step item deactivate event |
Slots
Name | Description | Bindings |
---|---|---|
default | Step item content | active boolean - if item is shown |
Class Inspector
Want to know how does the Class Inspector work?
Class prop | Description | Props | Suffixes | |
---|---|---|---|---|
rootClass | Class of the root element. | |||
mobileClass | Class of the root element when on mobile. 👉 Switch to mobile view to see it in action! | |||
sizeClass | Size of the root element with size. | size | small | |
positionClass | Class of the root element when is vertical and has position. | position | left | |
verticalClass | Class of the root element when is vertical. | vertical | ||
listClass | Class of the list container element. | |||
animatedClass | Class of the list container when animated. | animated | ||
dividerClass | Class of the item divider element. | |||
markerClass | Class of the item marker element. | |||
markerRoundedClass | Class of the item marker element when rounded. | rounded | ||
contentClass | Class of the panel container element. | |||
transitioningClass | Class of the panel container element when transitioning. 👉 Click on a marker to see it in action! | |||
navigationClass | Class of the navigation element. | |||
▷ stepClass | Class of the step item element. | |||
▷ stepVariantClass | Class of the step item element with variant (default value by parent steps component). | variant | primary | |
▷ stepPositionClass | Class of the step item element when positioned. | labelPosition | bottom | |
▷ stepClickableClass | Class of the step item element when clickable. | clickable | ||
▷ stepActiveClass | Class of the step item element when active. | |||
▷ stepDisabledClass | Class of the step item element when disabled. | disabled | ||
▷ stepPreviousClass | Class of the step item element before the active one. | |||
▷ stepNextClass | Class of the step item element after the active one. | |||
▷ stepLabelClass | Class of the step item label element. | |||
▷ stepIconClass | Class of the step item icon element. | |||
▷ stepPanelClass | Class of the step panel element. |
Sass Variables
Current theme ➜ Oruga
SASS Variable | Default |
---|---|
$steps-title-background-color | hsl(0, 0%, 100%) |
$steps-title-padding | 0.2em |
$steps-title-font-weight | 500 |
$steps-marker-background | var(--#{$prefix}grey-light) |
$steps-marker-color | var(--#{$prefix}primary-invert) |
$steps-marker-border | 0.2em solid #fff |
$steps-marker-font-weight | 700 |
$steps-marker-rounded-border-radius | var( --#{$prefix}base-border-radius-rounded) |
$steps-color | var(--#{$prefix}grey-lighter) |
$steps-previous-color | var(--#{$prefix}primary) |
$steps-active-color | var(--#{$prefix}primary) |
$steps-divider-height | 0.2em |
$steps-vertical-padding | 1em 0 |
$steps-item-line-height | var(--#{$prefix}base-line-height) |
$steps-link-color | hsl(0, 0%, 29%) |
$steps-content-spacer | 1rem |
$steps-content-padding | 1rem |
$steps-font-size | var(--#{$prefix}base-font-size) |
See ➜ 📄 SCSS file
Current theme ➜ Bulma
SASS Variable | Default |
---|---|
$steps-divider-height | 0.2em |
$steps-vertical-padding | 1em 0 |
$steps-colors | dv.$colors |
$steps-mobile-breakpoint | iv.$tablet |
$steps-marker-background | css.getVar("grey-light") |
$steps-marker-color | css.getVar("scheme-main") |
$steps-marker-border | 0.2em solid css.getVar("white") |
$steps-default-color | css.getVar("grey-lighter") |
$steps-previous-color | css.getVar("scheme-main") |
$steps-previous-background | css.getVar("primary") |
$steps-active-color | css.getVar("primary") |
$steps-active-background | css.getVar("scheme-main") |
$steps-details-background-color | css.getVar("body-background-color") |
See ➜ 📄 SCSS file
Current theme ➜ Bootstrap
SASS Variable | Default |
---|---|
$steps-marker-bg | var(--#{$prefix}gray-light) |
$steps-marker-border | var(--#{$prefix}white) |
$steps-marker-color | var(--#{$prefix}white) |
$steps-color-active | var(--#{$prefix}primary) |
$steps-title-color | var(--#{$prefix}dark) |
$steps-title-bg | var(--#{$prefix}white) |
$steps-title-font-weight | 500 |
$steps-divider-height | 0.2em |
$steps-content-spacer | 1rem |
$steps-content-padding | 1rem |
$steps-vertical-padding | 1em 0 |
See ➜ 📄 SCSS file