Enlite Prime - UI Elements

Steppers

You are here:app / ui / steppers

Steppers

The Stepper can be controlled by passing the current step index (zero-based) as the activeStep property.

Select campaign settings

Create an ad groupOptional

Create an ad

Select campaign settings...

src/app/containers/UiElements/demos/Steppers/HorizontalLinear.js

Horizontal Non-Linear

Non-linear steppers allow users to enter a multi-step flow at any point.

Step 1: Select campaign settings...

src/app/containers/UiElements/demos/Steppers/HorizontalNonLinear.js

Horizontal Non Linear - Error Step

Select campaign settings

Create an ad groupAlert message

Create an ad

Select campaign settings...

src/app/containers/UiElements/demos/Steppers/StepperError.js

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, which networks and geographical locations you want your ads to show on, and more.

Create an ad group

Create an ad

src/app/containers/UiElements/demos/Steppers/VerticalStepper.js

Mobile Stepper

Use a progress bar or dots when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps).

Mobile Stepper - Dots

Mobile Stepper - Progress

src/app/containers/UiElements/demos/Steppers/MobileSteppers.js

Carousel Stepper

This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference.

How to be happy :)

1 / 5

How to be happy :)

1 / 5

src/app/containers/UiElements/demos/Steppers/StepperCarousel.js