Oruga

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.

Copyright © 2020-2024 Walter Tommasi