Steps - Frameworks

The steps component is built to handle user journeys, showing progress.

AndroidreleasediOSreleasedReactreleasedVuereleased

iOS

AndroidiOSReactVue

Syntax

A step indicator displays a user’s progress through a set of steps, guiding toward the completion of a specified process.

Warp.StepIndicator(
    layoutOrientation: LayoutOrientation = .vertical,
    stepModel: Warp.StepIndicatorModel
)

Use step indicators to keep the user on track when completing a specific set of tasks or processes.

Horizontal StepIndicator.

var steps: [Warp.StepIndicatorItem] = [
        .init(
            title: "Step 1",
            description: "progress = .complete",
            progress: .complete
        ),
        .init(
            title: "Step 2",
            description: "progress = .inProgress",
            progress: .inProgress
        ),
        .init(
            title: "Step 3",
            description: "progress = .incomplete",
            progress: .incomplete
        )
    ]
do {
    var stepModel = try? Warp.StepIndicatorModel(from: steps)
    Warp.StepIndicator(layoutOrientation: .horizontal, stepModel: stepModel)
} catch {
    print("Error: \(error)")
}

Vertical StepIndicator.

var steps: [Warp.StepIndicatorItem] = [
        .init(
            title: "Step 1",
            description: "progress = .complete",
            progress: .complete
        ),
        .init(
            title: "Step 2",
            description: "progress = .inProgress",
            progress: .inProgress
        ),
        .init(
            title: "Step 3",
            description: "progress = .incomplete",
            progress: .incomplete
        )
    ]
do {
    var stepModel = try? Warp.StepIndicatorModel(from: steps)
    Warp.StepIndicator(layoutOrientation: .vertical, stepModel: stepModel)
} catch {
    print("Error: \(error)")
}

StepIndicatorModel is a helper class that takes an array of StepIndicatorItems and creates the model for the StepIndicator. Run through all steps and ensure that there are :
- no inProgress steps after an incompleted step
- no completed steps after an incompleted step
- no completed steps after an inProgress step
- one inProgress step at a time

Legacy support

By default all Warp components return a SwiftUI View but there is always a UIKit UIView available to use also.

Warp.StepIndicator(layoutOrientation: .horizontal, stepModel: stepModel).uiView

Parameters

Required props

Name	Type	Default	Description
stepModel	Warp.StepIndicatorModel		An array of Warp.StepIndicatorItem objects which contains title, description and progress of the steps, the first two are strings and progress can be incomplete, inProgress, or complete with default value as incomplete.

Optional Props

Name	Type	Default	Description
layoutOrientation	LayoutOrientation	.vertical	The orientation of the step indicator. Use one of the predefined LayoutOrientation values: .vertical, or .horizontal.

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system