Steps

Guide the user to complete tasks in accordance with the process.

Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.

Basic usage

Simple step bar.

Set active attribute with Number type, which indicates the index of steps and starts from 0.

1

Step 1

2

Step 2

3

Step 3

---

<template>
  <b-steps :active="active">
    <b-step title="Step 1" />
    <b-step title="Step 2" />
    <b-step title="Step 3" />
  </b-steps>

  <b-button small class="mt-4" @click="next">Next step</b-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(0)

const next = () => {
  if (active.value++ > 2) active.value = 0
}
</script>

Step bar with description

There is description for each step.

Step 1

Some description

2

Step 2

Some description

3

Step 3

Some description

---

<template>
  <b-steps :active="1">
    <b-step title="Step 1" description="Some description" />
    <b-step title="Step 2" description="Some description" />
    <b-step title="Step 3" description="Some description" />
  </b-steps>
</template>

Step bar with icon

A variety of custom icons can be used in the step bar.

The icon is set by the icon property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named slot.

Step 1

Step 2

Step 3

---

<template>
  <b-steps :active="1">
    <b-step title="Step 1" :icon="Edit" />
    <b-step title="Step 2" :icon="Upload" />
    <b-step title="Step 3" :icon="Image" />
  </b-steps>
</template>

<script lang="ts" setup>
import { Edit, Image, Upload } from '@bigin/icons-vue'
</script>

Vertical step bar

Vertical step bars.

You only need to set the vertical in the b-steps element.

Step 1

2

Step 2

3

Step 3

---

<template>
  <div class="h-300px">
    <b-steps vertical :active="1">
      <b-step title="Step 1" />
      <b-step title="Step 2" />
      <b-step title="Step 3" />
    </b-steps>
  </div>
</template>

Steps Attributes

Name	Description	Type	Accepted Values	Default
space	the spacing of each step, will be responsive if omitted. Supports percentage.	number / string	—	—
vertical	display in vertical direction	boolean	—	false
active	current activation step	number	—	0

Steps Slots

Name	Description	Subtags
-	customize default content	Step

Step Attributes

Name	Description	Type	Accepted Values	Default
title	step title	string	—	—
description	step description	string	—	—
icon	step custom icon. Icons can be passed via named slot as well	string / Component	—	—
status	current status. It will be automatically set by Steps if not configured.	string	wait / process / finish / error / success	—

Step Slots

Name	Description
icon	custom icon
title	step title
description	step description