Stepper

Steppers convey progress through numbered steps. They provide a wizard-like workflow by dividing content into logical steps.

Horizontal Stepper

Select campaign settings

Create an ad group

Create an ad

Back

<me-stepper active-step="1"> <me-step><me-step-label>Step One</me-step-label></me-step> <me-step><me-step-label>Step Two</me-step-label></me-step> <me-step><me-step-label>Step Three</me-step-label></me-step> </me-stepper>

Vertical Stepper

Select campaign settings

For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions.

Continue

Back

Create an ad group

An ad group contains one or more ads which target a shared set of keywords.

Continue

Back

Create an ad

Try out different ad text to see what brings in the most customers.

Finish

Back

<me-stepper orientation="vertical" active-step="0"> <me-step> <me-step-label>Step One</me-step-label> <me-step-content> Content for step one... <me-button variant="contained">Continue</me-button> </me-step-content> </me-step> </me-stepper>

Error Step

Step One

Error: Required fields missing

Step Three

API — Stepper

Attribute	Type	Default	Description
`active-step`	number	0	Zero-based index of the active step.
`orientation`	horizontal \| vertical	horizontal	Layout direction.

API — Step

Attribute	Type	Description
`active`	boolean	Set automatically by the stepper. Can be set manually for uncontrolled usage.
`completed`	boolean	Set automatically for steps before active-step.
`error`	boolean	Marks the step with an error indicator.