Oruga

# Steps

Responsive horizontal process steps

edit on github

# Examples

# Base

# Variants

# Vertical

# Class props

📄 Full scss file
How does Class props inspector work?
Class prop Description Props Suffixes
animatedClass Class of Steps component when animation gets triggered. animated
▷ itemClass Class of the content item.
▷ itemHeaderActiveClass Class of the nav item when active.
▷ itemHeaderClass Class of the nav item.
🔍 Classes applied have a higher specificity than expected when positionClass is applied
▷ itemHeaderPreviousClass Class of the nav item behind the active one.
▷ itemHeaderVariantClass Class of the nav item with variant (default value by parent steps component). variant primary
info
warning
danger
mobileClass Class of steps component when on mobile.
👉 Switch to mobile view to see it in action!
positionClass Class of the Steps component when is vertical and its position changes. position
vertical		 bottom
left
right
rootClass Root class of the element.
sizeClass Size of the steps. size small
medium
large
stepContentClass Class of the Steps component content.
🔍 Classes applied have a higher specificity than expected when positionClass is applied
stepContentTransitioningClass Class of the Steps component content when transition is happening.
👉 Click on a marker to see it in action
stepDividerClass Class of the Steps component dividers.
🔍 Classes applied have a higher specificity than expected when mobileClass or itemHeaderActiveClass or itemHeaderPreviousClass or positionClass is applied
stepLinkClass Class of the Steps component link.
🔍 Classes applied have a higher specificity than expected when itemHeaderActiveClass is applied
stepLinkClickableClass Class of the Steps component link when clickable. clickable
stepLinkLabelClass Class of the Step component link label.
stepLinkLabelPositionClass Class of the Step component link label when positioned. labelPosition bottom
right
left
stepMarkerClass Class of the Steps component marker.
🔍 Classes applied have a higher specificity than expected when itemHeaderActiveClass or itemHeaderPreviousClass is applied
stepMarkerRoundedClass Class of the Steps markers trigger when are rounded. rounded
stepNavigationClass Class of the Steps component navigation element.
🔍 Classes applied have a higher specificity than expected when positionClass is applied
stepsClass Class of the steps container.
🔍 Classes applied have a higher specificity than expected when positionClass is applied
verticalClass Class of the tooltip trigger. vertical


# Props

Prop name Description Type Values Default
animated Step navigation is animated boolean - true
ariaNextLabel string -
ariaPreviousLabel string -
destroyOnHide Destroy tab on hide boolean - false
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
iconNext Icon to use for navigation button string -
From config

steps: {
  iconNext: 'chevron-right'
}
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 -
From config

steps: {
  iconPrev: 'chevron-left'
}
labelPosition Position of the marker label, optional string bottom, right, left 'bottom'
mobileBreakpoint Mobile breakpoint as max-width value string -
override Override classes boolean - false
position Position of the tab, optional string centered, right
rounded Rounded step markers boolean - true
size Tab size, optional string small, medium, large
v-model string|number -
variant Color of the control, optional string|object primary, info, success, warning, danger, and any other custom color
vertical Show tab in vertical layout boolean - false

# Events

Event name Properties Description
input

# Slots

Name Description Bindings
default
navigation

# Step Item

# Props

Prop name Description Type Values Default
clickable Item can be used directly to navigate. If undefined, previous steps are clickable while the others are not boolean - undefined
icon Icon on the left string -
iconPack Icon pack string -
label Item label string -
override Override classes boolean - false
step Step marker content (when there is no icon) string|number -
value Item value (it will be used as v-model of wrapper component) 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 -
visible Show/hide item boolean - true

# Events

Event name Properties Description
activate

# Slots

Name Description Bindings
default

# 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-marker-background $steps-marker-background $grey-light
--oruga-steps-marker-color $steps-marker-color $primary-invert
--oruga-steps-marker-border $steps-marker-border .2em solid #fff
--oruga-steps-marker-font-weight $steps-marker-font-weight 700
--oruga-steps-marker-rounded-border-radius $steps-marker-rounded-border-radius $base-rounded-border-radius
--oruga-steps-color $steps-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-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-font-size $steps-font-size $base-font-size
--oruga-steps-details-title-font-weight $steps-details-title-font-weight 600

← Switch →