Steps

Responsive horizontal process steps

Examples

Base

Show code

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="isProfileWarning">
                Set <code>warning</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="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="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>

    <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="isProfileWarning ? 'warning' : ''"
            @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>

JS

import { ref } from "vue";

// Is
const activeStep = ref("1");
const isStepsClickable = ref(false);
const isAnimated = ref(true);
const isVertical = ref(false);
const isProfileWarning = 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" | "left" | "right">("bottom");

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

Variants

Show code

HTML

<section>
    <o-field label="Success">
        <o-steps variant="success">
            <o-step-item label="Account" icon="user-lock" />
            <o-step-item label="Profile" icon="user" />
            <o-step-item label="Social" icon="user-plus" />
        </o-steps>
    </o-field>

    <o-field label="Info">
        <o-steps variant="info">
            <o-step-item label="Account" icon="user-lock" />
            <o-step-item label="Profile" icon="user" />
            <o-step-item label="Social" icon="user-plus" />
        </o-steps>
    </o-field>

    <o-field label="Warning">
        <o-steps variant="warning">
            <o-step-item label="Account" icon="user-lock" />
            <o-step-item label="Profile" icon="user" />
            <o-step-item label="Social" icon="user-plus" />
        </o-steps>
    </o-field>

    <o-field label="Danger">
        <o-steps variant="danger">
            <o-step-item label="Account" icon="user-lock" />
            <o-step-item label="Profile" icon="user" />
            <o-step-item label="Social" icon="user-plus" />
        </o-steps>
    </o-field>
</section>

Sizes

Show code

HTML

<section>
    <o-field label="Small">
        <o-steps size="small">
            <o-step-item label="Account" icon="user-lock" />
            <o-step-item label="Profile" icon="user" />
            <o-step-item label="Social" icon="user-plus" />
        </o-steps>
    </o-field>

    <o-field label="Default">
        <o-steps>
            <o-step-item label="Account" icon="user-lock" />
            <o-step-item label="Profile" icon="user" />
            <o-step-item label="Social" icon="user-plus" />
        </o-steps>
    </o-field>

    <o-field label="Medium">
        <o-steps size="medium">
            <o-step-item label="Account" icon="user-lock" />
            <o-step-item label="Profile" icon="user" />
            <o-step-item label="Social" icon="user-plus" />
        </o-steps>
    </o-field>

    <o-field label="Large">
        <o-steps size="large">
            <o-step-item label="Account" icon="user-lock" />
            <o-step-item label="Profile" icon="user" />
            <o-step-item label="Social" icon="user-plus" />
        </o-steps>
    </o-field>
</section>

Vertical

Show code

HTML

<section>
    <o-field grouped>
        <o-field label="Position">
            <o-select v-model="position" placeholder="Position">
                <option :value="undefined">Default</option>
                <option value="left">Left</option>
                <option value="centered">Centered</option>
                <option value="right">Right</option>
            </o-select>
        </o-field>
        <o-field label="Size">
            <o-select v-model="size" placeholder="Size">
                <option :value="undefined">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>

JS

import { ref } from "vue";

const labelPosition = ref<"bottom" | "right" | "left">("bottom");
const position = ref<"left" | "centered" | "right">("left");
const size = ref<string>();

Class props

'Classes applied to the element'

Steps component

Responsive horizontal process steps

<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	[string, string, string, string] | [string, 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: "Next" }
ariaPreviousLabel	Accessibility previous button aria label	string	-	From config: steps: {   ariaPreviousLabel: "Previous" }
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	"bottom" | "left" | "right"	bottom, right, left	From config: steps: {   labelPosition: "bottom" }
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: steps: {   mobileBreakpoint: undefined }
v-model	The selected item value, use v-model to make it two-way binding	string|number|object	-
options	Steps options, unnecessary when default slot is used	OptionsProp<unknown>	-
override	Override existing theme classes completely	boolean	-
position	Position of the step	"centered" | "left" | "right"	left, centered, right
rounded	Rounded step markers	boolean	-	true
size	Step size	string	small, medium, large	From config: steps: {   size: undefined }
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:model-value	value T - updated modelValue prop	modelValue prop two-way binding
change	value T - new step value value T - 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

<o-step-item></o-step-item>

Props

Prop name	Description	Type	Values	Default
ariaRole	Role attribute to be passed to the li 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	-
component	Component to be injected.	Component	-
content	Text content, unnecessary when default slot is used	string	-
disabled	Item will be disabled	boolean	-	false
events	Events to be binded to the injected component	{}	-
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	-
props	Props to be binded to the injected component	any	-
step	Step marker content (when there is no icon)	number | string	-
tag	Step item tag name	DynamicComponent	-	From config: steps: {   itemTag: "button" }
value	Item value (it will be used as v-model of wrapper component) - default is an uuid	string|number|object	-
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	active boolean - if item is shown

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$steps-title-background-color	hsl(0, 0%, 100%)
$steps-title-padding	0.2em
$steps-title-font-weight	500
$steps-marker-background	var(--#{$prefix}grey-light)
$steps-marker-color	var(--#{$prefix}primary-invert)
$steps-marker-border	0.2em solid #fff
$steps-marker-font-weight	700
$steps-marker-rounded-border-radius	var( --#{$prefix}base-border-radius-rounded)
$steps-color	var(--#{$prefix}grey-lighter)
$steps-previous-color	var(--#{$prefix}primary)
$steps-active-color	var(--#{$prefix}primary)
$steps-divider-height	0.2em
$steps-vertical-padding	1em 0
$steps-item-line-height	var(--#{$prefix}base-line-height)
$steps-link-color	hsl(0, 0%, 29%)
$steps-content-spacer	1rem
$steps-content-padding	1rem
$steps-font-size	var(--#{$prefix}base-font-size)

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$steps-colors	var.$colors
$steps-mobile-breakpoint	vars.$tablet
$steps-marker-background	css.getVar("grey-light")
$steps-marker-color	css.getVar("scheme-main")
$steps-marker-border	0.2em solid css.getVar("white")
$steps-default-color	css.getVar("grey-lighter")
$steps-previous-color	css.getVar("scheme-main")
$steps-previous-background	css.getVar("primary")
$steps-active-color	css.getVar("primary")
$steps-active-background	css.getVar("scheme-main")
$steps-divider-height	0.2em
$steps-details-background-color	css.getVar("body-background-color")
$steps-vertical-padding	1em 0

See ➜ 📄 Full scss file

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-title-font-weight	500
$steps-divider-height	0.2em
$steps-content-spacer	1rem
$steps-content-padding	1rem
$steps-vertical-padding	1em 0

See ➜ 📄 Full scss file