Account

Lorem ipsum dolor sit amet.

<template>
    <section>
        <div class="block">
            <b-field grouped group-multiline>
                <div class="control">
                    <b-switch v-model="showSocial"> Show Social step </b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="isAnimated"> Animated </b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="isRounded"> Rounded </b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="isStepsClickable"> Clickable Marker </b-switch>
                </div>
            </b-field>
            <b-field grouped group-multiline>
                <div class="control">
                    <b-switch v-model="hasNavigation"> Navigation Buttons </b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="customNavigation"> Custom Navigation </b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="isProfileSuccess"> Set <code>is-success</code> for profile </b-switch>
                </div>
            </b-field>
            <b-field v-if="hasNavigation" grouped group-multiline>
                <b-field label="Prev icon">
                    <b-select v-model="prevIcon">
                        <option value="chevron-left">Chevron</option>
                        <option value="arrow-left">Arrow</option>
                    </b-select>
                </b-field>
                <b-field label="Next icon">
                    <b-select v-model="nextIcon">
                        <option value="chevron-right">Chevron</option>
                        <option value="arrow-right">Arrow</option>
                    </b-select>
                </b-field>
                <b-field label="Label position">
                    <b-select v-model="labelPosition">
                        <option value="bottom">Bottom</option>
                        <option value="right">Right</option>
                        <option value="left">Left</option>
                    </b-select>
                </b-field>
                <b-field label="Mobile mode">
                    <b-select v-model="mobileMode">
                        <option :value="null">-</option>
                        <option value="minimalist">Minimalist</option>
                        <option value="compact">Compact</option>
                    </b-select>
                </b-field>
            </b-field>
        </div>
        <b-steps
            v-model="activeStep"
            :animated="isAnimated"
            :rounded="isRounded"
            :has-navigation="hasNavigation"
            :icon-prev="prevIcon"
            :icon-next="nextIcon"
            :label-position="labelPosition"
            :mobile-mode="mobileMode">
            <b-step-item step="1" label="Account" :clickable="isStepsClickable">
                <h1 class="title has-text-centered">Account</h1>
                Lorem ipsum dolor sit amet.
            </b-step-item>

            <b-step-item step="2" 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 step="3" :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 :step="showSocial ? '4' : '3'" 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,
                isRounded: true,
                isStepsClickable: false,

                hasNavigation: true,
                customNavigation: false,
                isProfileSuccess: false,

                prevIcon: 'chevron-left',
                nextIcon: 'chevron-right',
                labelPosition: 'bottom',
                mobileMode: 'minimalist'
            }
        }
    }
</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	Value	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-mix`, `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	—	`fa`
`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 slot	Description	Props (if no)
default	Step body where `step-item` can be included	—
navigation	Used to customize navigation button	`{previous, next}`: Each object contains `disabled: boolean` and `action: Function`

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	Value	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-mix`, `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	—	`fa`
`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

Name slot	Description	Props (if no)
default	Step item body	—

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

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`