DEV Community

Badarinath Venkatnarayansetty
Badarinath Venkatnarayansetty

Posted on • Updated on

Step Indicator in SwiftUI

This SwiftUI iOS cocoapods library is used for indicating step actions for series of steps involved for any task. For eg: if you wanna illustrate the steps for collecting cash from an ATM , steps involved for any loan application. etc..

Alt Text

Here’s the library which does the work with just couple of lines which accepts below View Modifiers

.addSteps(_ steps: [View]) : array of views to be rendered closer to indicator

.alignments(_ alignments: [StepperAlignment]) : optional defaults to .center, available with custom options either .top, .center, .bottom sections

.indicatorTypes(_ indicators:[StepperIndicationType]): enum provides the options to use .circle(color, width) , .image(Image, width) , .custom(AnyView)

.lineOptions(_ options: StepperLineOptions): color, thickness line customization.

.spacing(_ value: CGFloat): spacing between each of the step views.

.stepIndicatorMode(_ mode: StepperMode): vertical, horizontal display modes.

Alt Text

     var body: some View {
         StepperView()
            .addSteps([Text("Account"), Text("MemberShip"))
            .indicators([.center,.center])
            .stepIndicatorMode(StepperMode.horizontal)
            .spacing(50)
           .lineOptions(StepperLineOptions.custom(1,Colors.blue(.teal).rawValue))
      }

References:

Cocoapods

Github

More Documentation

Feel free to request any new features or create a pull request.

Happy Coding..!

Discussion (0)