Skip to content

Steps

Responsive horizontal process steps

Examples

Base

Show code

Variants

Show code

Sizes

Show code

Vertical

Show code

Class props

'Classes applied to the element'

Steps component

Responsive horizontal process steps

html
<o-steps></o-steps>

Props

Prop nameDescriptionTypeValuesDefault
animateInitiallyApply animation on the initial renderboolean-
From config:
steps: {
  animateInitially: false
}
animatedStep navigation is animatedboolean-
From config:
steps: {
  animated: true
}
animationTransition animation namestring[][next, prev], [right, left, down, up]
From config:
steps: {
  animation: [ "slide-next", "slide-prev", "slide-down", "slide-up",]
}
ariaNextLabelAccessibility next button aria labelstring-
From config:
steps: {
  ariaNextLabel: undefined
}
ariaPreviousLabelAccessibility previous button aria labelstring-
From config:
steps: {
  ariaPreviousLabel: undefined
}
destroyOnHideDestroy stepItem on hideboolean-false
hasNavigationNext and previous buttons below the component. You can use this property if you want to use your own custom navigation items.boolean-true
iconNextIcon to use for navigation buttonstring-
From config:
steps: {
  iconNext: "chevron-right"
}
iconPackIcon pack to use for the navigationstringmdi, fa, fas and any other custom icon pack
From config:
steps: {
  iconPack: undefined
}
iconPrevIcon to use for navigation buttonstring-
From config:
steps: {
  iconPrev: "chevron-left"
}
labelPositionPosition of the marker labelstringbottom, right, left
From config:
steps: {
  labelPosition: "bottom"
}
mobileBreakpointMobile breakpoint as max-width valuestring-
From config:
steps: {
  mobileBreakpoint: undefined
}
v-modelThe selected item valuestring|number|object-
overrideOverride existing theme classes completelyboolean-
positionPosition of the stepstringleft, centered, right
roundedRounded step markersboolean-true
sizeStep sizestringsmall, medium, large
From config:
steps: {
  size: undefined
}
variantColor of the controlstringprimary, info, success, warning, danger, and any other custom color
From config:
steps: {
  variant: undefined
}
verticalShow step in vertical layoutboolean-false

Events

Event namePropertiesDescription
update:modelValuevalue string | number | object - updated modelValue propmodelValue prop two-way binding
changevalue string | number | object - new step value
value string | number | object - old step value
on step change event

Slots

NameDescriptionBindings
defaultPlace step items here
navigationOverride step navigationprevious {disabled: boolean, action: (): void } - previous button configs
next {disabled: boolean, action: (): void } - next button configs

StepItem component

html
<o-step-item></o-step-item>

Props

Prop nameDescriptionTypeValuesDefault
ariaRoleRole attribute to be passed to the div wrapper for better accessibilitystring-
From config:
steps: {
  ariaRole: "tab"
}
clickableItem can be used directly to navigate.
If undefined, previous steps are clickable while the others are not
boolean-
iconIcon on the leftstring-
From config:
steps: {
  icon: undefined
}
iconPackIcon packstring-
From config:
steps: {
  iconPack: undefined
}
labelItem labelstring-
overrideOverride existing theme classes completelyboolean-
stepStep marker content (when there is no icon)string|number-
tagStep item tag nameDynamicComponent-
From config:
steps: {
  itemTag: "button"
}
valueItem value (it will be used as v-model of wrapper component) - default is an uuidstring|number|object-Default function (see source code)
variantDefault style for the step.
This will override parent type.
Could be used to set a completed step to "success" for example
string-
visibleShow/hide itemboolean-true

Events

Event namePropertiesDescription
activateon step item activate event
deactivateon step item deactivate event

Slots

NameDescriptionBindings
defaultStep item content

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$steps-details-background-colorhsl(0, 0%, 100%)
$steps-details-padding0.2em
$steps-marker-backgroundvar(--#{$prefix}grey-light)
$steps-marker-colorvar(--#{$prefix}primary-invert)
$steps-marker-border0.2em solid #fff
$steps-marker-font-weight700
$steps-marker-rounded-border-radiusvar( --#{$prefix}base-border-radius-rounded)
$steps-colorvar(--#{$prefix}grey-lighter)
$steps-previous-colorvar(--#{$prefix}primary)
$steps-active-colorvar(--#{$prefix}primary)
$steps-divider-height0.2em
$steps-vertical-padding1em 0
$steps-item-line-heightvar(--#{$prefix}base-line-height)
$steps-link-colorhsl(0, 0%, 29%)
$steps-content-padding1rem
$steps-font-sizevar(--#{$prefix}base-font-size)
$steps-details-title-font-weight600

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$steps-colorsvar.$colors
$steps-mobile-breakpointvars.$tablet
$steps-marker-backgroundcss.getVar("grey-light")
$steps-marker-colorcss.getVar("scheme-main")
$steps-marker-border0.2em solid css.getVar("white")
$steps-default-colorcss.getVar("grey-lighter")
$steps-previous-colorcss.getVar("scheme-main")
$steps-previous-backgroundcss.getVar("primary")
$steps-active-colorcss.getVar("primary")
$steps-active-backgroundcss.getVar("scheme-main")
$steps-divider-height0.2em
$steps-details-background-colorcss.getVar("body-background-color")
$steps-vertical-padding1em 0

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS VariableDefault
$steps-marker-bgvar(--#{$prefix}gray-light)
$steps-marker-bordervar(--#{$prefix}white)
$steps-marker-colorvar(--#{$prefix}white)
$steps-color-activevar(--#{$prefix}primary)
$steps-title-colorvar(--#{$prefix}dark)
$steps-title-bgvar(--#{$prefix}white)
$steps-divider-height0.2em
$steps-content-spacer1rem
$steps-content-padding1rem
$steps-vertical-padding1em 0

See ➜ 📄 Full scss file

Released under the MIT License.