Steps

To create step highlighter in top of your forms use this component.

Code:

  
    HTML
    
  
  <fvSteps :value="value" :steps="steps" />

  
    Javascript
    
  
  export default {
    data () {
        return {
            steps: ['Stage One', 'Stage Two', 'Stage Three', 'And Stage Four'],
            value: 0
        }
    }
}

Examples:

View Source

Normal

1

Stage One

2

Stage Two

3

Stage Three

4

And Stage Four

Custom Formated and Clickable Steps

Start

1/3

Middle

2/3

Final

3/3

Size

1

A

2

B

3

C

4

D

1

A

2

B

3

C

4

D

1

A

2

B

3

C

4

D

1

A

2

B

3

C

4

D

1

A

2

B

3

C

4

D

API:

Name	Type	Default	Description
value	Number	0	Working step index.
steps*	Array	---	List of steps.

Name	Params	Description
input	newValue	Fired when component request to change value.

Name	Params	Description
box	step and index	Template for inside steps box.
text	step and index	Template for under steps box.

Name	Description
.fv-size-xs	XSmall size
.fv-size-sm	Small size
.fv-size-md	Medium size (actived by default)
.fv-size-lg	Large size
.fv-size-xl	XLarge size