Add to Cart Stepper

Add to Cart Stepper

An Add pill that morphs into a quantity stepper with rolling digits, a floating +1 ghost and a trash icon at one item, plus a cart badge that pops on every change.

Luiz Mello
  • stepper
  • button
  • badge

snippet.swift303 lines

5 files • Scroll to see all →
/// An "Add" pill that morphs into a `– 1 +` stepper.////// The same capsule stretches open, the digits roll up or down with/// `numericText`, a ghost "+1"/"−1" floats away on every change, and the/// minus becomes a trash can at one item. Back at zero it folds into "Add"./// Tapping + at the limit shakes the pill with a warning haptic.public struct AddToCartStepper: View {    @Binding var quantity: Int    var maxQuantity: Int    var colors: [Color]    var height: CGFloat    var addTitle: String​    @State private var ghostTrigger = 0    @State private var ghostIsIncrement = true    @State private var limitHits = 0​    public init(        quantity: Binding<Int>,        maxQuantity: Int = 9,​// ... (click "Show full code" to see more)
Viewing: AddToCartStepper.swift•1 of 5