Components - Steppers
The "v-stepper" component displays progress through numbered steps.
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
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
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
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
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
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
2
Configure analytics for this app
3
Select an ad format and name ad unit
4
View setup instructions
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
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
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
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
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
The same state also applies to Vertical steppers.
check
Name of step 1
check
Name of step 2
warning
Ad templates Alert message
4
View setup instructions