# Steps

Responsive horizontal process steps


edit on github

# Examples

# Base

# Variants

# Vertical

# Props

Prop name Description Type Values Default
variant Color of the control, optional string|object primary, info, success, warning, danger, and any other custom color
size Tab size, optional string small, medium, large
animated boolean - true
vertical Show tab in vertical layout boolean - false
position Position of the tab, optional string centered, right
destroyOnHide Destroy tab on hide boolean - false
iconPack Icon pack to use for the navigation string mdi, fa, fas and any other custom icon pack
iconPrev Icon to use for navigation button string - Config -> 'steps.iconPrev': 'chevron-left'
iconNext Icon to use for navigation button string - Config -> 'steps.iconNext': 'chevron-right'
hasNavigation Next and previous buttons below the component. You can use this property if you want to use your own custom navigation items. boolean - true
labelPosition Position of the marker label, optional string bottom, right, left 'bottom'
rounded Rounded step markers boolean - true
mobileMode How Steps will be displayed for mobile user string minimalist, compact, null 'minimalist'
ariaNextLabel string -
ariaPreviousLabel string -
rootClass string -
sizeClass string -
verticalClass string -
positionClass string -
stepsClass string -
variantClass string -
animatedClass string -
labelPositionClass string -
roundedClass string -
mobileClass string -
stepItemsClass string -
stepContentClass string -
stepContentTransitioningClass string -
stepNavigationClass string -
stepDetailsClass string -
stepTitleClass string -
stepLinkClass string -

# Slots

Name Description Bindings
default
navigation [
{
"name": "previous"
},
{
"name": "next"
}
]

# OStepItem

# Props

Prop name Description Type Values Default
label Item label string -
icon Icon on the left string -
iconPack Icon pack string -
visible Show/hide item boolean - true
value Item value (it will be used as v-model of wrapper component) string|number -
headerClass Header class of the item string|array|object -
step Step marker content (when there is no icon) string|number -
variant Default style for the step, optional This will override parent type. Could be used to set a completed step to "success" for example string|object -
clickable Item can be used directly to navigate. If undefined, previous steps are clickable while the others are not boolean - undefined
itemClass string -
variantClass string -
itemActiveClass string -
itemPreviousClass string -

# Style

CSS Variable SASS Variable Default
--oruga-steps-details-background-color $steps-details-background-color hsl(0, 0%, 100%)
--oruga-steps-details-padding $steps-details-padding .2em
--oruga-steps-maker-default-background $steps-maker-default-background $grey-light
--oruga-steps-maker-default-color $steps-maker-default-color $primary-invert
--oruga-steps-marker-default-border $steps-marker-default-border .2em solid #fff
--oruga-steps-maker-font-weight $steps-maker-font-weight 700
--oruga-steps-marker-rounded-border-radius $steps-marker-rounded-border-radius $base-rounded-border-radius
--oruga-steps-default-color $steps-default-color $grey-lighter
--oruga-steps-previous-color $steps-previous-color $primary
--oruga-steps-active-color $steps-active-color $primary
--oruga-steps-divider-height $steps-divider-height .2em
--oruga-steps-vertical-padding $steps-vertical-padding 1em 0
--oruga-steps-mobile-max-width $steps-mobile-max-width 769px
--oruga-steps-item-line-height $steps-item-line-height $base-line-height
--oruga-steps-link-color $steps-link-color hsl(0, 0%, 29%)
--oruga-steps-content-padding $steps-content-padding 1rem
--oruga-steps-details-title-font-weight $steps-details-title-font-weight 600