FxSteps

A step navigation bar that guides users through task completion processes. The number of steps must be at least 2, and can be configured based on actual application scenarios.

Steps Attributes

Parameter	Description	Type	Options	Default
space	Spacing between steps, auto-adaptive if not specified. Supports percentage values.	number / string	—	—
direction	Display direction	string	vertical/horizontal	horizontal
active	Current active step	number	—	0
process-status	Status of current step	string	wait / process / finish / error / success	process
finish-status	Status of finished steps	string	wait / process / finish / error / success	finish
align-center	Center alignment	boolean	—	false
simple	Whether to apply simplified style	boolean	—	false

Step Attributes

Parameter	Description	Type	Options	Default
title	Step title	string	—	—
description	Descriptive text	string	—	—
icon	Icon class name for custom icons, also supports slot usage	string	—	—
status	Step status (overrides steps setting if specified)	string	wait / process / finish / error / success	—

Step Slot

name	Description
icon	Custom icon
title	Custom title
description	Custom description

Basic Usage

Simple step bar.

Next

Set the active property with a Number indicating the step index (starting from 0). For fixed-width steps, set the space property (unit: px). The finish-status property can modify the status of completed steps.

<fx-steps :active="active" finish-status="success">
  <fx-step title="Step 1"></fx-step>
  <fx-step title="Step 2"></fx-step>
  <fx-step title="Step 3"></fx-step>
</fx-steps>

<fx-button style="margin-top: 12px;" @click="next">Next</fx-button>

<script>
  export default {
    data() {
      return {
        active: 0
      };
    },

    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
  }
</script>

Expand Copy Copy

Steps with Status

Display status for each step.

You can also use named slots (title) to replace property settings. All available slot names are listed at the end of this document.

<fx-steps :space="200" :active="1" finish-status="success">
  <fx-step title="Completed"></fx-step>
  <fx-step title="In Progress"></fx-step>
  <fx-step title="Step 3"></fx-step>
</fx-steps>

Expand Copy Copy

Steps with Description

Each step has corresponding descriptive text.

<fx-steps :active="1">
  <fx-step title="Step 1" description="This is a very very very long descriptive text"></fx-step>
  <fx-step title="Step 2" description="This is a very very very long descriptive text"></fx-step>
  <fx-step title="Step 3" description="This one is shorter"></fx-step>
</fx-steps>

Expand Copy Copy

Centered Steps

Both titles and descriptions will be centered.

<fx-steps :active="2" align-center>
  <fx-step title="Step 1" description="This is a very very very long descriptive text"></fx-step>
  <fx-step title="Step 2" description="This is a very very very long descriptive text"></fx-step>
  <fx-step title="Step 3" description="This is a very very very long descriptive text"></fx-step>
  <fx-step title="Step 4" description="This is a very very very long descriptive text"></fx-step>
</fx-steps>

Expand Copy Copy

Steps with Icons

Custom icons can be used in steps.

Set icons through the icon property (refer to Icon component documentation). Named slots can also be used for custom icons.

<fx-steps :active="1">
  <fx-step title="Step 1" icon="el-icon-edit"></fx-step>
  <fx-step title="Step 2" icon="el-icon-upload"></fx-step>
  <fx-step title="Step 3" icon="el-icon-picture"></fx-step>
</fx-steps>

Expand Copy Copy

Vertical Steps

Vertical step bar.

Simply set the direction property to vertical in fx-steps element.

<div style="height: 300px;">
  <fx-steps direction="vertical" :active="1">
    <fx-step title="Step 1"></fx-step>
    <fx-step title="Step 2"></fx-step>
    <fx-step title="Step 3" description="This is a very very very long descriptive text"></fx-step>
  </fx-steps>
</div>

Expand Copy Copy

Simplified Steps

Set simple to apply simplified style. In this mode, align-center / description / direction / space properties will be disabled.

<fx-steps :active="1" simple>
  <fx-step title="Step 1" icon="el-icon-edit"></fx-step>
  <fx-step title="Step 2" icon="el-icon-upload"></fx-step>
  <fx-step title="Step 3" icon="el-icon-picture"></fx-step>
</fx-steps>

<fx-steps :active="1" finish-status="success" simple style="margin-top: 20px">
  <fx-step title="Step 1"></fx-step>
  <fx-step title="Step 2"></fx-step>
  <fx-step title="Step 3"></fx-step>
</fx-steps>

Expand Copy Copy