SwiftUI package for creating custom stepper with gesture controls and flexible design as per your choice.
SwiftUI package for creating custom stepper with gesture controls and flexible design as per your choice.
An example of Custom steppers created with this library
About SSStepper
It supports stepper operation by swiping. By swiping up user can directly shift to maximum value that you have set. By swiping down user can directly shif to minimum value that you have set. And by swiping left and right user can increse or decrease the value by count that you have set. It is fully customisable by Shapes of backgorund view and top view alogn with colors, Directions, haptic feedbacks, colors of icons and Text, axis of stepper whether you want vertical or Horizontal.
To run the example project, clone the repo, and run pod install
from the Example directory first.
This pod requires a deployment target of iOS 13.0 or greater
SSStepper is available through CocoaPods.
To install
it, simply add the following line to your Podfile:
pod 'SSStepper'
and run pod install
from the root directory of project and in your code add import SSStepper
and boom you're done.💥
When using Xcode 11 or later, you can install SSLineChart
through Swift Package Manager by going to your Project settings > Swift Packages
and add the repository by providing the GitHub URL. Alternatively, you can go to File
> Swift Packages
> Add Package Dependencies...
SSStepper.swift
, ContentView.swift
and StepperModel.swift
to your project.Import the package in the file you would like to use it:
import SSStepper
This library shares one View which you can use as a stepper with lots of customization lke shapes, axis, count value and many more. Basic example:
@State private var number: Int = 0
...
var body: some Scene {
SSStepper(value: $number)
}
The results of any interaction with input stepper will be available in declared number
state variable.
You can customize almost every main thing in This library.
For Customizations you have to pass another value of StepperModel
during call of SSStepper. This stepperModel argument is optional as well as Every arguments in StepperModel
is also Optional. So, you need to add only those arguments which yo wanted to customize. Here's the examples :
An example of Custom Size SSSteppers created with this library
@State private var number: Int = 0
...
var body: some Scene {
SSStepper(
value: $firstCustomisedNumber,
stepperModal: StepperModal(
size: .init(width: 200, height: 60)
)
)
}
An example of Custom Shape and Color of SSSteppers created with this library
@State private var number: Int = 0
...
var body: some Scene {
SSStepper(
value: $firstCustomisedNumber,
stepperModal: StepperModal(
innerShape: .rectangle(color: .yellow),
outerShape: .roundedRectangle(color: .red)
)
)
}
An example of default count value of SSSteppers created with this library
@State private var number: Int = 0
...
var body: some Scene {
SSStepper(
value: $firstCustomisedNumber,
stepperModal: StepperModal(
countValue: 5
)
)
}
By passing this argument you can change the default increment/decrement value from 1 to anything.
An example of default locking system of SSSteppers created with this library
@State private var number: Int = 0
...
var body: some Scene {
SSStepper(
value: $firstCustomisedNumber,
stepperModal: StepperModal(
direction: .allDirection
)
)
}
By passing this argument you can change locking system in library.
1. if you select .allDirection
than you can move to vertical point during the horizontal swipe
2. If you select .oneDirection
than you can not move to vertical points during horizontal swipe or vice versa. (By default this is selected)
An example of default axis system of SSSteppers created with this library
@State private var number: Int = 0
...
var body: some Scene {
SSStepper(
value: $firstCustomisedNumber,
stepperModal: StepperModal(
axis: .vertical
)
)
}
By passing this argument you can change Axis of SSStepper in library.
100
.0
.@State private var number: Int = 0
...
var body: some Scene {
SSStepper(
value: $firstCustomisedNumber,
stepperModal: StepperModal(
maxNumber: 100,
minNumber: 1
)
)
}
accentColor
'.White
'.@State private var number: Int = 0
...
var body: some Scene {
SSStepper(
value: $firstCustomisedNumber,
stepperModal: StepperModal(
textColor: .red
iconColor: .white
)
)
}
.light
.@State private var number: Int = 0
...
var body: some Scene {
SSStepper(
value: $firstCustomisedNumber,
stepperModal: StepperModal(
feedBackStyle: .heavy
)
)
}
@State private var number: Int = 0
...
var body: some Scene {
SSStepper(
value: $firstCustomisedNumber,
stepperModal: StepperModal(
showShadow: false
)
)
}
MAX
and default value for Minimum is MIN
.@State private var number: Int = 0
...
var body: some Scene {
SSStepper(
value: $firstCustomisedNumber,
stepperModal: StepperModal(
minText: "mínima",
maxText: "máxima"
)
)
}
Shake
aniamtion on error while value is already at minimum or maximum. By default value is true
.@State private var number: Int = 0
...
var body: some Scene {
SSStepper(
value: $firstCustomisedNumber,
stepperModal: StepperModal(
showErrorShakeAnimation = false
)
)
}
true
.@State private var number: Int = 0
...
var body: some Scene {
SSStepper(
value: $firstCustomisedNumber,
stepperModal: StepperModal(
enableVerticalMinMax = false
)
)
}
Up for a suggestions. Give suggestions for more features and customisations.
Whether you're helping us fix bugs, improve the docs, or a feature request, we'd love to have you! :muscle:
Check out our Contributing Guide for ideas on contributing.
Give a ⭐️ if this project helped you!
This project is licensed under the MIT License - see the LICENSE file for details