Steps

Responsive horizontal process steps

Show Social step Animated Clickable Marker

Navigation Buttons Custom Navigation Set is-success for profile

Account

Lorem ipsum dolor sit amet.

<template>
    <section>
        <div class="block">
            <button class="button" @click="activeStep = 1">Set Profile</button>
        </div>
        <div class="block">
            <b-switch v-model="showSocial"> Show Social step </b-switch>
            <b-switch v-model="isAnimated"> Animated </b-switch>
            <b-switch v-model="isStepsClickable"> Clickable Marker </b-switch>
        </div>
        <div class="block">
            <b-switch v-model="hasNavigation"> Navigation Buttons </b-switch>
            <b-switch v-model="customNavigation"> Custom Navigation </b-switch>
            <b-switch v-model="isProfileSuccess"> Set <code>is-success</code> for profile </b-switch>
        </div>
        <b-field v-if="hasNavigation" grouped group-multiline>
            <b-select v-model="prevIcon">
                <option value="chevron-left">Chevron prev icon </option>
                <option value="arrow-left">Arrow prev icon</option>
            </b-select>
            <b-select v-model="nextIcon">
                <option value="chevron-right">Chevron next icon </option>
                <option value="arrow-right">Arrow next icon</option>
            </b-select>
        </b-field>
        <b-steps
            v-model="activeStep"
            :animated="isAnimated"
            :has-navigation="hasNavigation"
            :icon-prev="prevIcon"
            :icon-next="nextIcon">
            <b-step-item label="Account" :clickable="isStepsClickable">
                <h1 class="title has-text-centered">Account</h1>
                Lorem ipsum dolor sit amet.
            </b-step-item>

            <b-step-item label="Profile" :clickable="isStepsClickable" :type="{'is-success': isProfileSuccess}">
                <h1 class="title has-text-centered">Profile</h1>
                Lorem ipsum dolor sit amet.
            </b-step-item>

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

            <b-step-item label="Finish" :clickable="isStepsClickable" disabled>
                <h1 class="title has-text-centered">Finish</h1>
                Lorem ipsum dolor sit amet.
            </b-step-item>

            <template
                v-if="customNavigation"
                slot="navigation"
                slot-scope="{previous, next}">
                <b-button
                    outlined
                    type="is-danger"
                    icon-pack="fas"
                    icon-left="backward"
                    :disabled="previous.disabled"
                    @click.prevent="previous.action">
                    Previous
                </b-button>
                <b-button
                    outlined
                    type="is-success"
                    icon-pack="fas"
                    icon-right="forward"
                    :disabled="next.disabled"
                    @click.prevent="next.action">
                    Next
                </b-button>
            </template>
        </b-steps>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                activeStep: 0,
                showSocial: false,
                isAnimated: true,
                hasNavigation: true,
                customNavigation: false,
                prevIcon: 'chevron-left',
                nextIcon: 'chevron-right',
                isStepsClickable: false,
                isProfileSuccess: false
            }
        }
    }
</script>

# Dynamic

Items can be created / modified / deleted and will always keep the defined order.

You can also use v-if to show (or not) a Step Item.

Show Music item (using v-if)

Show books item (by adding / removing from the array)

Lorem ipsum dolor sit amet.

<template>
    <section>
        <div class="block">
            <b-switch v-model="showMusic"> Show Music item (using <code>v-if</code>) </b-switch>
        </div>
        <div class="block">
            <b-switch v-model="showBooks"> Show books item (by adding / removing from the array) </b-switch>
        </div>
        <b-steps v-model="activeStep">
            <template v-for="(step, index) in steps">
                <b-step-item
                    v-if="step.displayed"
                    :key="index"
                    :label="step.label">
                    {{ step.content }}
                </b-step-item>
            </template>
        </b-steps>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                activeStep: 0,
                showMusic: true,
                showBooks: false
            }
        },
        computed: {
            baseSteps() {
                return [
                    {
                        label: 'Pictures',
                        content: 'Lorem ipsum dolor sit amet.',
                        displayed: true,
                    },
                    {
                        label: 'Music',
                        content: 'Lorem ipsum dolor sit amet.',
                        displayed: this.showMusic,
                    },
                    {
                        label: 'Videos',
                        content: 'Lorem ipsum dolor sit amet.',
                        displayed: true,
                    }
                ]
            },
            steps() {
                const steps = [...this.baseSteps]
                if (this.showBooks) {
                    steps.splice(steps.length - 1, 0, this.bookStep);
                }
                return steps
            },
            bookStep() {
                return {
                    label: 'Books',
                    content: 'Lorem ipsum dolor sit amet.',
                    displayed: true,
                }
            }
        }
    }
</script>

# Icons

<template>
    <b-steps>
        <b-step-item label="Account" icon="account-key"></b-step-item>
        <b-step-item label="Profile" icon="account"></b-step-item>
        <b-step-item label="Social" icon="account-plus"></b-step-item>
    </b-steps>
</template>

# Sizes

<template>
    <section>
        <b-steps size="is-small">
            <b-step-item label="Account" icon="account-key"></b-step-item>
            <b-step-item label="Profile" icon="account"></b-step-item>
            <b-step-item label="Social" icon="account-plus"></b-step-item>
        </b-steps>

        <b-steps size="is-medium">
            <b-step-item label="Account" icon="account-key"></b-step-item>
            <b-step-item label="Profile" icon="account"></b-step-item>
            <b-step-item label="Social" icon="account-plus"></b-step-item>
        </b-steps>

        <b-steps size="is-large">
            <b-step-item label="Account" icon="account-key"></b-step-item>
            <b-step-item label="Profile" icon="account"></b-step-item>
            <b-step-item label="Social" icon="account-plus"></b-step-item>
        </b-steps>
    </section>
</template>

# Types

<template>
    <section>
        <b-steps type="is-black">
            <b-step-item label="Account" icon="account-key"></b-step-item>
            <b-step-item label="Profile" icon="account"></b-step-item>
            <b-step-item label="Social" icon="account-plus"></b-step-item>
        </b-steps>

        <b-steps type="is-info">
            <b-step-item label="Account" icon="account-key"></b-step-item>
            <b-step-item label="Profile" icon="account"></b-step-item>
            <b-step-item label="Social" icon="account-plus"></b-step-item>
        </b-steps>

        <b-steps type="is-success">
            <b-step-item label="Account" icon="account-key"></b-step-item>
            <b-step-item label="Profile" icon="account"></b-step-item>
            <b-step-item label="Social" icon="account-plus"></b-step-item>
        </b-steps>
    </section>
</template>

# API

Steps

Name	Description	Type	Values	Default
`v-model`	Binding value, step index	Number	—	`0`
`animated`	Steps have slide animation	Boolean	—	`true`
`type`	Default Type/Style for the steps, optional	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger`, and any other colors you've set in the `$colors` list on Sass	—
`size`	Size of the step, optional	String	`is-small`, `is-medium`, `is-large`	—
`destroy-on-hide`	Destroy stepitem on hide	Boolean	—	`false`
`icon-pack`	Icon pack to use for the navigation	String	—	`mdi`
`icon-prev`	Icon to use for navigation button	String	—	`chevron-left`
`icon-next`	Icon to use for navigation button	String	—	`chevron-right`
`has-navigation`	Next and previous buttons below the component. You can use this property if you want to use your own custom navigation items.	Boolean	—	`true`
`aria-page-label`	Accessibility label for the page link. If passed, this text will be prepended to the number of the page.	String	—	—
`aria-current-label`	Accessibility label for the current page link. If passed, this text will be prepended to the current page.	String	—	—

Name	Description	Parameters
`input`	Triggers when step is clicked	`index: Number`
`change`	Triggers when active step is changed	`index: Number`

Step Item

Name	Description	Type	Values	Default
`label`	Step label	String	—	—
`type`	Default Type/Style for the step, optional This will override parent type. Could be used to set a completed step to `is-success` for example	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger`, and any other colors you've set in the `$colors` list on Sass	—
`icon`	Icon name	String	—	—
`icon-pack`	Icon pack to use	String	—	`mdi`
`clickable`	Item can be used directly to navigate. If undefined, previous steps are clickable while the others are not.	Boolean	—	—
`visible`	Item is visible	Boolean	-	true

Slot name	Description	Props (if scoped)
default	Step item body	—

# Variables

You can use these variables to customize this component.

Name	Default
`$steps-maker-default-color`	`$grey-light`
`$steps-marker-default-border`	`.2em solid #fff`
`$steps-default-color`	`$grey-lighter`
`$steps-previous-color`	`$primary`
`$steps-active-color`	`$primary`
`$steps-divider-height`	`.2em`

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub