Steps

steps

Is a component that presents a sequence that leads the user through well-defined steps. This can be used for a variety of registration forms, where you don't want to scare the user with loads of fields and questions.

Usage

steps

import SwiftUI

struct ExampleView: View {

    @StateObject var steps:XelaStepsItems = XelaStepsItems(
        items: [
            XelaStepItem(id: 1, title: "Step 1", caption: "Basic information"),
            XelaStepItem(id: 2, title: "Step 2", caption: "User managment"),
            XelaStepItem(id: 3, title: "Step 3", caption: "Fleet settings"),
            XelaStepItem(id: 4, title: "Step 4", caption: "Confirmation")
        ]
    )

    var body: some View {
        HStack {
            XelaSteps(
                steps: steps,
                orientation: .Vertical,
                primaryTextColor: Color(xelaColor: .Gray2),
                secondaryTextColor: Color(xelaColor: .Gray7),
                primaryAccentColor: Color(xelaColor: .Green1),
                secondaryAccentColor: Color(xelaColor: .Green10),
                secondaryColor: Color(xelaColor: .Gray11),
                errorColor: Color(xelaColor: .Red3),
                iconColor: Color(.white),
                lines: true
            )

            Spacer()
        }
        .padding()

        XelaButton(
            text:"Continue",
            action: {
                for i in 0...(steps.items.count-1) {
                    if steps.items[2].state == .Active {
                        steps.items[2].state = .Error
                        break;
                    }
                    if steps.items[i].state == .Active {
                        withAnimation {
                            steps.items[i].state = .Completed

                            if i+1 < steps.items.count {
                                steps.items[i+1].state = .Active
                            }
                        }
                        break
                    }
                }
            },
            rightIcon: "arrow-right",
            size: .Medium,
            background: Color(xelaColor: .Green1),
            foregroundColor: Color(.white)
        )
    }
}

Properties XelaSteps

Name Type Default Value Required Description
steps XelaStepsItems - YES Steps items
orientation XelaStepsOrientation - YES Steps orientation (.Horizontal, .Vertical)
primaryTextColor Color Color(xelaColor: .Gray3) NO Primary text color
secondaryTextColor Color Color(xelaColor: .Gray7) NO Secondary text color
primaryAccentColor Color Color(xelaColor: .Blue3) NO Primary accent color
secondaryAccentColor Color Color(xelaColor: .Blue11) NO Secondary accent color
errorColor Color Color(xelaColor: .Red3) NO Error color
iconColor Color Color(.white) NO Icon color
lines Bool true NO Show lines between steps

Properties XelaStepsItems

Name Type Default Value Required Description
items [XelaStepsItem] - YES Steps items

Properties XelaStepsItem

Name Type Default Value Required Description
id Int - YES Step Item ID
title String NO Step Item title text
caption String NO Step Item caption text
state XelaStepsState .Default NO Step Item state (.Default, .Completed, .Active, .Error)