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.
Steps
Responsive horizontal process steps
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"
#navigation="{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>
# Dynamic
Pictures: 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>
<div class="block">
<b-switch v-model="showGames"> Show games item (by using the visible property) </b-switch>
</div>
<b-steps v-model="activeStep">
<template v-for="(step, index) in steps">
<b-step-item
v-if="step.displayed"
:key="index"
:visible="step.visible"
:label="step.label">
{{ step.content }}
</b-step-item>
</template>
</b-steps>
</section>
</template>
<script>
export default {
data() {
return {
activeStep: 0,
showMusic: true,
showBooks: false,
showGames: false
}
},
computed: {
baseSteps() {
return [
{
label: 'Pictures',
content: 'Pictures: Lorem ipsum dolor sit amet.',
displayed: true,
},
{
label: 'Music',
content: 'Music: Lorem ipsum dolor sit amet.',
displayed: this.showMusic,
},
{
label: 'Games',
content: 'Games: Lorem ipsum dolor sit amet.',
displayed: true,
visible: this.showGames
},
{
label: 'Videos',
content: 'Videos: 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: 'Books: 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>
# Vertical
Account: Lorem ipsum dolor sit amet.
Account: Lorem ipsum dolor sit amet.
Account: Lorem ipsum dolor sit amet.
Account: Lorem ipsum dolor sit amet.
Account: Lorem ipsum dolor sit amet.
<template>
<section>
<b-field grouped group-multiline>
<div class="control">
<b-switch
v-model="position"
true-value="is-right"
false-value="is-left"> Right position </b-switch>
</div>
<b-field label="Size" label-position="on-border">
<b-select v-model="size" placeholder="Size">
<option :value="null">Default</option>
<option value="is-small">Small</option>
<option value="is-medium">Medium</option>
<option value="is-large">Large</option>
</b-select>
</b-field>
<b-field label="Label position" label-position="on-border">
<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>
<b-steps
:position="position"
:label-position="labelPosition"
:size="size"
vertical>
<b-step-item label="Account" icon="account-key">
Account: Lorem ipsum dolor sit amet. <br />
Account: Lorem ipsum dolor sit amet. <br />
Account: Lorem ipsum dolor sit amet.
</b-step-item>
<b-step-item label="Profile" icon="account">
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.
</b-step-item>
<b-step-item label="Social" icon="account-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.
</b-step-item>
</b-steps>
</section>
</template>
<script>
export default {
data() {
return {
labelPosition: 'bottom',
position: null,
size: null,
}
}
}
</script>
# API
Steps
Name | Description | Type | Values | Default |
|---|---|---|---|---|
v-model | Binding value, step index. Passing undefined will show the first step | Number, String | — | undefined |
animated | Steps have slide animation | Boolean | — | true |
animateInitially | Apply animation on the initial render | Boolean | — | undefined |
animation | Custom animation (transition name) | String | — | slide-next slide-prev |
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 |
vertical | Display the steps vertically | Boolean | — | false |
position | Position of the vertical step, optional | String | is-right | — |
label-position | Position of the marker label, optional | String | bottom, right, left | bottom |
rounded | Rounded step markers | Boolean | — | true |
mobile-mode | How Steps will be displayed for mobile user | String | minimalist: Only the active Step is displayed,
compact: Step label is displayed only for the active,
null: Will keep the same behavior as desktop | minimalist |
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 | — | — |
Item
Name | Description | Type | Values | Default |
|---|---|---|---|---|
step | Step marker content (when there is no icon) | String | Number | — | — |
label | Step label | String | — | — |
value | Step identifier | String | — | Vnode uid |
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 |
headerClass | The classes to add to the step label container | String, Array, Object | - | - |
# Variables
You can use these variables to customize this component.
Name | Default |
|---|---|
$steps-items-focused-outline | none |
$steps-details-background-color | $body-background-color |
$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 |
$steps-vertical-padding | 1em 0 |
$steps-mobile-max-width | $tablet |
$steps-colors | $colors |
This page is open source. Noticed a typo or something's unclear?