# Steps
Responsive horizontal process steps
# 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 |