Steps β
Responsive horizontal process steps
Class props β
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 | |
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 | bottom | |
rootClass | Root class of the element. | |||
sizeClass | Size of the steps. | size | small | |
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 | |
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 |
Steps component β
html
<o-steps></o-steps>
Props β
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
animated | Step navigation is animated | boolean | - | true |
ariaNextLabel | string | - | ||
ariaPreviousLabel | string | - | ||
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: { |
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: { |
labelPosition | Position of the marker label, optional | string | bottom , right , left | 'bottom' |
mobileBreakpoint | Mobile breakpoint as max-width value | string | - | |
override | boolean | - | ||
rounded | Rounded step markers | boolean | - | true |
Slots β
Name | Description | Bindings |
---|---|---|
default | ||
navigation |
StepItem component β
html
<o-step-item></o-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 |
override | boolean | - | ||
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 | - |
Sass variables β
Current theme β Oruga Base
SASS Variable | Default |
---|---|
$steps-details-background-color | hsl(0, 0%, 100%) |
$steps-details-padding | 0.2em |
$steps-marker-background | $grey-light |
$steps-marker-color | $primary-invert |
$steps-marker-border | 0.2em solid #fff |
$steps-marker-font-weight | 700 |
$steps-marker-rounded-border-radius | $base-rounded-border-radius |
$steps-color | $grey-lighter |
$steps-previous-color | $primary |
$steps-active-color | $primary |
$steps-divider-height | 0.2em |
$steps-vertical-padding | 1em 0 |
$steps-item-line-height | $base-line-height |
$steps-link-color | hsl(0, 0%, 29%) |
$steps-content-padding | 1rem |
$steps-font-size | $base-font-size |
$steps-details-title-font-weight | 600 |
See β π Full scss file
Current theme β Oruga Full
SASS Variable | Default |
---|---|
$steps-details-background-color | hsl(0, 0%, 100%) |
$steps-details-padding | 0.2em |
$steps-marker-background | $grey-light |
$steps-marker-color | $primary-invert |
$steps-marker-border | 0.2em solid #fff |
$steps-marker-font-weight | 700 |
$steps-marker-rounded-border-radius | $base-rounded-border-radius |
$steps-color | $grey-lighter |
$steps-previous-color | $primary |
$steps-active-color | $primary |
$steps-divider-height | 0.2em |
$steps-vertical-padding | 1em 0 |
$steps-item-line-height | $base-line-height |
$steps-link-color | hsl(0, 0%, 29%) |
$steps-content-padding | 1rem |
$steps-font-size | $base-font-size |
$steps-details-title-font-weight | 600 |
See β π Full scss file
Current theme β Bulma
The theme does not have any custom variables for this component.
Current theme β Bootstrap
SASS Variable | Default |
---|---|
$steps-marker-bg | var(--#{$prefix}gray-light) |
$steps-marker-border | var(--#{$prefix}white) |
$steps-marker-color | var(--#{$prefix}white) |
$steps-color-active | var(--#{$prefix}primary) |
$steps-title-color | var(--#{$prefix}dark) |
$steps-title-bg | var(--#{$prefix}white) |
$steps-divider-height | 0.2em |
$steps-content-spacer | 1rem |
$steps-content-padding | 1rem |
$steps-vertical-padding | 1em 0 |
See β π Full scss file