StackCardView

SwiftUI iOS component for showing stack of cards with swipe and button actions

Swipe Actions

With Buttons

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

Installation

StackCardView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'StackCardView'

ViewModifiers

.setCardDisplayType(value: StackCardDisplayType)
    Sets the display type of the StackCard to either .top or .bottom position.

.setRotationAngle(value: CGFloat)
    Sets the rotation angle of the StackCard to `value` degrees.

.onRightSwipe(perform action: @escaping (() -> Void))
     Executes the provided closure when a right swipe gesture is detected

.onLeftSwipe(perform action: @escaping (() -> Void))
     Executes the provided closure when a left swipe gesture is detected
     
.bind(model: [any StackCardModelProtocol])
     Binds the model requried for card offset positions, updating etc.

Usage

import StackCardView

// Step 1: create a model make sure it corresponds to `StackCardModelProtocol`
struct StackCardModel: StackCardModelProtocol, Identifiable {
    typealias CardType = StackCardModel
    
    // mandate requirement by `StackCardModelProtocol`
    var id: String
    
    // custom properties for your model object
    var name:String = ""
    var image: String = ""
    
    init(id: String, name: String, image: String) {
        self.id = id
        self.name = name
        self.image = image
    }
}


@State private var stackCardModels:[StackCardModel] =[]
@StateObject private var viewModel = StackCardViewModel<StackCardModel>()

var body: some View {
    VStack {
        ForEach(stackCardModels.reversed(), id: \.id) { card in
            StackCard(model: card, viewModel: viewModel) {
                // content 
                Image(card.image)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
            }
            .setCardDisplayType(value: .top) 
            .setRotationAngle(value: 20)
            .onRightSwipe {
                print("Right Swipe")
            }
            .onLeftSwipe {
                print("Left Swipe")
            }
        }
        .embedInZStack()
        .bind(model: stackCardModels)
    }
    .onAppear {
       stackCardModels = [
            StackCardModel(id: UUID().uuidString, name: "Park1", image: "park1"),
            StackCardModel(id: UUID().uuidString, name: "Park2", image: "park2"),
            StackCardModel(id: UUID().uuidString, name: "Park3", image: "park3")
       ]
    }
  }
}

Author

Badarinath Venkatnarayansetty.Follow and contact me on Twitter or LinkedIn

Contribution

Feature requests, bug reports, and pull requests are all welcome. Refer Contributing Guidelines for more details.

License

StepperView is available under the MIT license. See the LICENSE file for more info.