• BSA Lab.
      home

  • apps
    Welcome
  • dashboard
    Layout
  • web
    Components
    keyboard_arrow_down
    • Lists
      list
    • Cards
      payment
    • Carousels
      recent_actors
    • Expansion panels
      view_day
    • Dialogs
      message
    • Tabs
      tab
    • Steppers
      directions_walk
    • Data tables
      view_module
    • Date/Time Pickers
      today
    • Text fields
      format_indent_increase
    • Forms
      assignment
  • alarm
    Warnings
    keyboard_arrow_down
    • Error-404
      alarm_add
    • Error-500
      alarm_on
    • Maintenance
      build
Vuetify / Components-steppers
  • Documentation

  • Vuetify.js Quick-Start
  • Nuxt.js Guide
  • Vue.js Guide
Components - Steppers
The "v-stepper" component displays progress through numbered steps.
#1 Example
A stepper can be used for a multitude of scenarios, including shopping carts, record creation and more.
1
Name of step 1

2
Name of step 2

3
Name of step 3
First.jpg
Second.jpg
Third.jpg

#2 Editable steps
An editable step can be selected by a user at any point and will navigate them to that step.
edit
Select campaign settings

check
Create an ad group

3
Create an ad

#3 Non-Editable steps
Non-editable steps force a user to process linearly through your process.
check
Select campaign settings

2
Create an ad group

3
Create an ad

#4 Optional steps
An optional step can be called out with sub-text.
1
Select campaign settings

2
Create an ad group Optional

3
Create an ad
check
Select campaign settings

2
Create an ad group Optional

3
Create an ad

#5 Horizontal steps
Horizontal steppers move users along the x-axis through the defined steps.
1
Select campaign settings

2
Create an ad group

3
Create an ad

#6 Vertical steppers
Vertical steppers move users along the y-axis and otherwise work exactly the same as their horizontal counterpart.
1
Select an app Summarize if needed
First.jpg
2
Configure analytics for this app
Second.jpg
3
Select an ad format and name ad unit
Third.jpg
4
View setup instructions
Fourth.jpg

#7 Linear steppers
Linear steppers will always move a user through your defined path.
1
Select campaign settings

2
Create an ad group

3
Create an ad
check
Select campaign settings

2
Create an ad group

3
Create an ad
check
Select campaign settings

check
Create an ad group

3
Create an ad

#8 Non-linear steppers
Non-linear steppers allow the user to move through your process in whatever way they choose.
1
Select campaign settings

2
Create an ad group

3
Create an ad
edit
Select campaign settings

2
Create an ad group

edit
Create an ad
edit
Select campaign settings

edit
Create an ad group

edit
Create an ad

#9 Alternate labels
Steppers also have an alternative label style which places the title under the step itself.
1
Ad unit details

2
Ad sizes

3
Ad templates
1
Ad unit details

2
Ad sizes Optional

3
Ad templates

#10 Multi-line error state
An error state can be displayed to notify the user of some action that must be taken.
1
Ad unit details

warning
Ad templates Alert message

3
Ad sizes

#11 Alternative label multi-line error state
The error state can also be applied to the alternative label style.
check
Ad type

check
Ad style

warning
Custom channels Alert message

6
Get code

#12 Vertical multi-line error state
The same state also applies to Vertical steppers.
check
Name of step 1
First.jpg
check
Name of step 2
Second.jpg
warning
Ad templates Alert message
Third.jpg
4
View setup instructions
Fourth.jpg

© 2017 "BSA Lab." - All Rights Reserved