StepperView
SwiftUI iOS component for Step Indications
![]() |
![]() |
![]() |
Usecase
![]() |
![]() |
![]() |
Example
To run the example project, clone the repo, and run pod install
from the Example directory first.
Requirements
- iOS 13.0+
- Xcode 11.2+
- Swift 5.0+
- CocoaPods 1.6.1+
Installation
CocoaPods
StepperView is available through CocoaPods. To install it, simply add the following line to your Podfile.
pod 'StepperView','~> 1.3.1'
Carthage
Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks. To integrate StepperView into your Xcode project using Carthage, specify it in your Cartfile:
github "badrinathvm/stepperView" == 1.3.1
Swift Package Manager
StepperView is available through Swift Package Manager. To install it, simply add it to the dependencies
of your Package.swift
dependencies: [
.package(url: "https://github.com/badrinathvm/StepperView.git", from: "1.3.1")
]
Usage
import StepperView
let steps = [ Text("Cart").font(.caption),
Text("Delivery Address").font(.caption),
Text("Order Summary").font(.caption),
Text("Payment Method").font(.caption),
Text("Track").font(.caption)]
let alignments = [StepperAlignment.center,.center,.center, .center, .center]
let indicationTypes = [StepperIndicationType.custom(NumberedCircleView(text: "1")),
.custom(NumberedCircleView(text: "2")),
.custom(NumberedCircleView(text: "3")),
.custom(NumberedCircleView(text: "4")),
.custom(NumberedCircleView(text: "5"))]
var body: some View {
var body: some View {
StepperView()
.addSteps(steps)
.indicators(indicationTypes)
.stepIndicatorMode(StepperMode.horizontal)
.spacing(50)
.lineOptions(StepperLineOptions.custom(1, Colors.blue(.teal).rawValue))
}
}
Methods ( View Modifiers )
.addSteps(_ steps: [View]) :
1. list of views to be closer to indicator
.alignments(_ alignments: [StepperAlignment])
1. optional modifier
2. defaults to .center, available with custom options either .top, .center, .bottom
.indicatorTypes(_ indicators:[StepperIndicationType]):
1. modifier to customize the step indications
2. provides enum with cases .circle(color, width), .image(Image, width) , .custom(AnyView)
.lineOptions(_ options: StepperLineOptions):
1. line customization `Color` , `width`
.spacing(_ value: CGFloat):
1. spacing between each of the step views either vertically horizontally
.stepIndicatorMode(_ mode: StepperMode):
1. Step Indicator display modes either vertical, horizontal
.addPitStops(_ steps: [PitStopStep])
1. optional modifier
2. `PitStopStep` - structure that provides option to provide `View`, line customizations
Refer Example for more details on usage of StepperView
📚 Documentation
Mentions
Author
Badarinath Venkatnarayansetty
Contact
Follow and contact me on Twitter or LinkedIn. If you find an issue, just open a ticket. Pull requests are welcome.
License
StepperView is available under the MIT license. See the LICENSE file for more info.