Step Steps

Shows the steps of a task.

Basic Usage

Basic usage. The component automatically determines the state of each step based on the current value.

Completed

Description of this step

In Progress

Description of this step

Pending

Description of this step

Pending

Description of this step

<template>
  <div>
    <b-steps :current="current">
      <b-step title="Completed" content="Description of this step"></b-step>
      <b-step title="In Progress" content="Description of this step"></b-step>
      <b-step title="Pending" content="Description of this step"></b-step>
      <b-step title="Pending" content="Description of this step"></b-step>
    </b-steps>
    <b-button type="primary" @click="next">Next Step</b-button>
  </div>
</template>

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

const current = ref(0)

function next() {
  if (current.value === 3) {
    current.value = 0
  } else {
    current.value += 1
  }
}
</script>

Small Steps

Set size="small" to display small steps

Completed

进Row中

待进Row

待进Row

<template>
  <div>
    <b-steps :current="current" size="small">
      <b-step title="Completed"></b-step>
      <b-step title="进Row中"></b-step>
      <b-step title="待进Row"></b-step>
      <b-step title="待进Row"></b-step>
    </b-steps>
    <b-button type="primary" @click="next">下一步</b-button>
  </div>
</template>

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

const current = ref(0)

function next() {
  if (current.value === 3) {
    current.value = 0
  } else {
    current.value += 1
  }
}
</script>

Customicon

Set icon to customize icons

Completed

In Progress

Pending

<template>
  <div>
    <b-steps :current="current">
      <b-step title="Completed" icon="sketch"></b-step>
      <b-step title="In Progress" icon="block"></b-step>
      <b-step title="Pending" icon="Gitlab"></b-step>
    </b-steps>
    <b-button type="primary" @click="next">Next Step</b-button>
  </div>
</template>

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

const current = ref(0)

function next() {
  if (current.value === 2) {
    current.value = 0
  } else {
    current.value += 1
  }
}
</script>

Vertical Steps

Set direction="vertical" to enable vertical steps

Completed

Description of this step

In Progress

Description of this step

Pending

Description of this step

Pending

Description of this step

<template>
  <div>
    <b-steps :current="current" direction="vertical">
      <b-step title="Completed" content="Description of this step"></b-step>
      <b-step title="In Progress" content="Description of this step"></b-step>
      <b-step title="Pending" content="Description of this step"></b-step>
      <b-step title="Pending" content="Description of this step"></b-step>
    </b-steps>
    <b-button type="primary" @click="next">Next Step</b-button>
  </div>
</template>

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

const current = ref(0)

function next() {
  if (current.value === 3) {
    current.value = 0
  } else {
    current.value += 1
  }
}
</script>

Set Status

Basic usage. The component automatically determines the state of each step based on the current value.

Completed

Description of this step

In Progress

Description of this step

Pending

Description of this step

Pending

Description of this step

<template>
  <div>
    <b-steps :current="2" status="error">
      <b-step title="Completed" content="Description of this step"></b-step>
      <b-step title="In Progress" content="Description of this step"></b-step>
      <b-step title="Pending" content="Description of this step"></b-step>
      <b-step title="Pending" content="Description of this step"></b-step>
    </b-steps>
  </div>
</template>

<script setup lang="ts"></script>

Steps Props

Parameter	Description	Type	Options	Default
current	Current step	Number	—	0
status	Current step status	String	wait、process、finish、error、success	process
size	Size	String	small	—
direction	Direction	String	horizontal or vertical	horizontal

Step Props

Parameter	Description	Type	Options	Default
title	Title	String	—	—
status	Current step status	String	wait、process、finish、error、success	process
content	Detailed content (optional)	String	—	—
icon	Custom icon	String	—	—

Step Slot

Event Name	Description
title	Title
content	Detailed content
icon	Custom icon