Steps

Responsive horizontal process steps

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>
            <b-switch v-model="hasNavigation"> Navigation Buttons </b-switch>
            <b-switch v-model="isProfileSuccess"> Set <code>is-success</code> for profile </b-switch>
        </div>
        <b-steps v-model="activeStep" :animated="isAnimated" :has-navigation="hasNavigation">
            <b-step-item label="Account" :clickable="isStepsClickable">
                Lorem ipsum dolor sit amet.
            </b-step-item>

            <b-step-item label="Profile" :clickable="isStepsClickable" :type="{'is-success': isProfileSuccess}">
                Lorem ipsum dolor sit amet.<br>
                Lorem ipsum dolor sit amet.
            </b-step-item>

            <b-step-item :visible="showSocial" label="Social" :clickable="isStepsClickable">
                Lorem ipsum dolor sit amet.<br>
                Lorem ipsum dolor sit amet.<br>
                Lorem ipsum dolor sit amet.
            </b-step-item>

            <b-step-item label="Finish" :clickable="isStepsClickable" disabled>
                Lorem ipsum dolor sit amet.<br>
                Lorem ipsum dolor sit amet.<br>
                Lorem ipsum dolor sit amet.<br>
                Lorem ipsum dolor sit amet.
            </b-step-item>
        </b-steps>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                activeStep: 0,
                showSocial: false,
                isAnimated: true,
                hasNavigation: true,
                isStepsClickable: false,
                isProfileSuccess: false
            }
        }
    }
</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-modelBinding value, step index Number 0
animatedSteps have slide animation Boolean true
typeDefault 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
sizeSize of the step, optional String is-small, is-medium, is-large
destroy-on-hideDestroy stepitem on hide Boolean false
icon-packIcon pack to use for the navigation String mdi
has-navigationNext and previous buttons below the component. You can use this property if you want to use your own custom navigation items. String true
aria-page-labelAccessibility label for the page link. If passed, this text will be prepended to the number of the page. String
aria-current-labelAccessibility label for the current page link. If passed, this text will be prepended to the current page. String

Step Item

Name
Description
Type
Values
Default
labelStep label String
typeDefault 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
iconIcon name String
icon-packIcon pack to use String mdi
clickableItem can be used directly to navigate. If undefined, previous steps are clickable while the others are not. Boolean
visibleItem is visible Boolean -true

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

Improve this page on GitHub