Steps

Responsive horizontal process steps

Examples

Base

Show code

HTMLJS

html

<section>
    <o-field grouped group-multiline>
        <o-field>
            <o-switch v-model="showSocial" label="Show Social step" />
        </o-field>
        <o-field>
            <o-switch v-model="isAnimated" label="Animated" />
        </o-field>
        <o-field>
            <o-switch v-model="isRounded" label="Rounded" />
        </o-field>
        <o-field>
            <o-switch v-model="isVertical" label="Vertical" />
        </o-field>
        <o-field>
            <o-switch v-model="isStepsClickable" label="Clickable Marker" />
        </o-field>
        <o-field>
            <o-switch v-model="hasNavigation" label="Navigation Buttons" />
        </o-field>
        <o-field>
            <o-switch
                v-model="customNavigation"
                label="Custom Navigation" />
        </o-field>
        <o-field>
            <o-switch v-model="isProfileSuccess">
                Set <code>success</code> for profile
            </o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="enableProfileActivateEvent">
                Enable profile activate event
            </o-switch>
        </o-field>
    </o-field>

    <o-field v-if="hasNavigation" grouped>
        <o-field label="Prev icon">
            <o-select v-model="prevIcon">
                <option value="chevron-left">Chevron</option>
                <option value="arrow-left">Arrow</option>
            </o-select>
        </o-field>
        <o-field label="Next icon">
            <o-select v-model="nextIcon">
                <option value="chevron-right">Chevron</option>
                <option value="arrow-right">Arrow</option>
            </o-select>
        </o-field>
        <o-field label="Label position">
            <o-select v-model="labelPosition">
                <option value="bottom">Bottom</option>
                <option value="right">Right</option>
                <option value="left">Left</option>
            </o-select>
        </o-field>
        <o-field label="Steps position">
            <o-select v-model="stepsPosition">
                <option value="right">Right</option>
                <option value="left">Left</option>
            </o-select>
        </o-field>
    </o-field>

    <o-steps
        v-model="activeStep"
        :vertical="isVertical"
        :animated="isAnimated"
        :rounded="isRounded"
        :has-navigation="hasNavigation"
        :icon-prev="prevIcon"
        :icon-next="nextIcon"
        :label-position="labelPosition"
        destroy-on-hide>
        <o-step-item
            value="1"
            step="1"
            label="Account"
            :clickable="isStepsClickable">
            <h1 class="title has-text-centered">Account</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item
            value="2"
            step="2"
            label="Profile"
            :clickable="isStepsClickable"
            :variant="isProfileSuccess ? 'success' : ''"
            @activate="onProfileActivate">
            <h1 class="title has-text-centered">Profile</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item
            value="3"
            step="3"
            :visible="showSocial"
            label="Social"
            :clickable="isStepsClickable">
            <h1 class="title has-text-centered">Social</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item
            value="4"
            :step="showSocial ? '4' : '3'"
            label="Finish"
            :clickable="isStepsClickable"
            disabled>
            <h1 class="title has-text-centered">Finish</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <template v-if="customNavigation" #navigation="{ previous, next }">
            <o-button
                outlined
                label="Previous"
                variant="danger"
                icon-pack="fas"
                icon-left="backward"
                :disabled="previous.disabled"
                @click.prevent="previous.action" />

            <o-button
                outlined
                label="Next"
                variant="success"
                icon-pack="fas"
                icon-right="forward"
                :disabled="next.disabled"
                @click.prevent="next.action" />
        </template>
    </o-steps>
</section>

html

import { ref } from "vue";

// Is
const activeStep = ref("1");
const isStepsClickable = ref(false);
const isAnimated = ref(true);
const isVertical = ref(false);
const isProfileSuccess = ref(false);
const isRounded = ref(true);
const enableProfileActivateEvent = ref(false);
// Navigation
const hasNavigation = ref(true);
const customNavigation = ref(false);
// Icon
const prevIcon = ref("chevron-left");
const nextIcon = ref("chevron-right");
// Misc
const showSocial = ref(false);
const labelPosition = ref("bottom");
const stepsPosition = ref("left");

const onProfileActivate = () => {
    if (enableProfileActivateEvent.value) {
        alert("Profile Activated");
    }
};

scss

css

Variants

Show code

Vertical

Show code

HTMLJS

html

<section>
    <o-field grouped>
        <o-field>
            <o-switch
                v-model="position"
                true-value="right"
                label="Right position" />
        </o-field>
        <o-field label="Size">
            <o-select v-model="size" placeholder="Size">
                <option :value="null">Default</option>
                <option value="small">Small</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
            </o-select>
        </o-field>
        <o-field label="Label position" label-position="on-border">
            <o-select v-model="labelPosition">
                <option value="bottom">Bottom</option>
                <option value="right">Right</option>
                <option value="left">Left</option>
            </o-select>
        </o-field>
    </o-field>

    <o-steps
        :position="position"
        :label-position="labelPosition"
        :size="size"
        vertical>
        <o-step-item label="Account" icon="user-lock">
            Account: Lorem ipsum dolor sit amet. <br />
            Account: Lorem ipsum dolor sit amet. <br />
            Account: Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item label="Profile" icon="user">
            Profile: Lorem ipsum dolor sit amet. <br />
            Profile: Lorem ipsum dolor sit amet.? <br />
            Profile: Lorem ipsum dolor sit amet. <br />
            Profile: Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item label="Social" icon="user-plus" disabled>
            Social: Lorem ipsum dolor sit amet. <br />
            Social: Lorem ipsum dolor sit amet. <br />
            Social: Lorem ipsum dolor sit amet. <br />
            Social: Lorem ipsum dolor sit amet. <br />
            Social: Lorem ipsum dolor sit amet.
        </o-step-item>
    </o-steps>
</section>

html

import { ref } from "vue";

const labelPosition = ref("bottom");
const position = ref(null);
const size = ref(null);

scss

css

Class props

Steps component

Responsive horizontal process steps

html

<o-steps></o-steps>

Props

Prop name	Description	Type	Values	Default
animateInitially	Apply animation on the initial render	boolean	-	From config: `steps: { animateInitially: false }`
animated	Step navigation is animated	boolean	-	From config: `steps: { animated: true }`
animation	Transition animation name	Array<string>	`[next`, `prev]`, `[right`, `left`, `down`, `up]`	From config: `steps: { animation: [ "slide-next", "slide-prev", "slide-down", "slide-up", ] }`
ariaNextLabel	Accessibility next button aria label	string	-	From config: `steps: { ariaNextLabel: undefined }`
ariaPreviousLabel	Accessibility previous button aria label	string	-	From config: `steps: { ariaPreviousLabel: undefined }`
destroyOnHide	Destroy stepItem 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`	From config: `steps: { iconPack: undefined }`
iconPrev	Icon to use for navigation button	string	-	From config: `steps: { iconPrev: "chevron-left" }`
labelPosition	Position of the marker label	string	`bottom`, `right`, `left`	From config: `steps: { labelPosition: "bottom" }`
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: `steps: { mobileBreakpoint: undefined }`
override	Override existing theme classes completely	boolean	-
position	Position of the step	string	`left`, `centered`, `right`
rounded	Rounded step markers	boolean	-	`true`
size	Step size	string	`small`, `medium`, `large`	From config: `steps: { size: undefined }`
v-model		string\|number	-
variant	Color of the control	string	`primary`, `info`, `success`, `warning`, `danger`, `and any other custom color`	From config: `steps: { variant: undefined }`
vertical	Show step in vertical layout	boolean	-	`false`

Events

Event name	Properties	Description
update:modelValue	value `string \| number` - updated modelValue prop	modelValue prop two-way binding
change	value `string \| number` - new step value value `string \| number` - old step value	on step change event

Slots

Name	Description	Bindings
default	Place step items here
navigation	Override step navigation	previous `{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 name	Description	Type	Values	Default
ariaRole	Role attribute to be passed to the div wrapper for better accessibility	string	-	From config: `steps: { ariaRole: "tab" }`
clickable	Item can be used directly to navigate. If undefined, previous steps are clickable while the others are not	boolean	-
icon	Icon on the left	string	-	From config: `steps: { icon: undefined }`
iconPack	Icon pack	string	-	From config: `steps: { iconPack: undefined }`
label	Item label	string	-
override	Override existing theme classes completely	boolean	-
step	Step marker content (when there is no icon)	string\|number	-
tag	Step item tag name	DynamicComponent	-	From config: `steps: { itemTag: "button" }`
value	Item value (it will be used as v-model of wrapper component)	string\|number	-	Default function (see source code)
variant	Default style for the step. This will override parent type. Could be used to set a completed step to "success" for example	string	-
visible	Show/hide item	boolean	-	`true`

Events

Event name	Properties	Description
activate		on step item activate event
deactivate		on step item deactivate event

Slots

Name	Description	Bindings
default	Step item content

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

Steps ​

Examples ​

Base

Variants

Vertical

Class props ​

Steps component ​

Props ​

Events ​

Slots ​

StepItem component ​

Props ​

Events ​

Slots ​

Sass variables ​

Steps

Examples

Class props

Steps component

Props

Events

Slots

StepItem component

Props

Events

Slots

Sass variables