CardStack

An elegant SwiftUI card stack component for creating beautiful, interactive card stack interfaces.

Features

• Display content in a visually appealing card stack layout
• Support for programmatic and gesture-based navigation
• Multiple interaction modes: no gestures, standard gestures, and enhanced gestures
• Highly customizable appearance and behavior
• Support for iOS 16+, macOS 13+, tvOS 16+, and watchOS 9+

Installation

Add this package to your Xcode project using Swift Package Manager:

1. In Xcode, select "File" → "Add Packages..."
2. Enter the repository URL: https://github.com/HanlunWang/CardStack
3. Follow the prompts to add the package to your project

Quick Start

Basic Usage

import SwiftUI
import CardStack

// Create a card stack with your data
CardStack(items, currentIndex: $currentIndex) { item in
    // Your card content here
    Text(item.title)
        .frame(width: 300, height: 400)
        .background(item.color)
        .cornerRadius(10)
}

Enable Swipe Gestures

// Add swipe gesture support with a simple modifier
CardStack(items, currentIndex: $currentIndex) { item in
    // Your card content
}
.swipeable()

// Or use enhanced animations
CardStack(items, currentIndex: $currentIndex) { item in
    // Your card content
}
.enhancedSwipeable()

Add Random Card Angles

// Add random rotation angles to cards
CardStack(items, currentIndex: $currentIndex) { item in
    // Your card content
}
.useRandomAngles(maxAngle: 5.0)

Configuration Options

The CardStackConfiguration struct provides extensive customization:

| Property | Description | Default | | ------------------------ | ---------------------------------------------- | ---------- | | swipeMode | Gesture mode (.none, .normal, .enhanced) | .none | | cardPadding | Horizontal spacing between cards | 35.0 | | scaleFactorPerCard | Scale reduction for each card | 0.1 | | rotationDegreesPerCard | Rotation angle for each card | 2.0 | | swipeThreshold | Distance required to trigger a swipe | 200.0 | | springStiffness | Animation spring stiffness | 300.0 | | springDamping | Animation spring damping | 40.0 | | swingOutMultiplier | Exaggeration factor for animations | 15.0 | | randomAngles | Settings for random card rotation | disabled |

Example Configuration

// Create a custom configuration
var config = CardStackConfiguration()
config.swipeMode = .enhanced
config.cardPadding = 40
config.scaleFactorPerCard = 0.15
config.rotationDegreesPerCard = 3.0
config.randomAngles = RandomAnglesSettings(enabled: true, maxAngle: 3.0)

// Apply the configuration
CardStack(items, currentIndex: $currentIndex, configuration: config) { item in
    // Your card content
}

Gesture Modes

CardStack supports three gesture modes:

1. No Gestures (.none): Disables all swipe gestures, navigation only through programmatic means.
2. Standard Gestures (.normal): Enables basic swipe gestures with simple animation effects.
3. Enhanced Gestures (.enhanced): Enables advanced swipe gestures with more dynamic animation effects, including "fling out" effects.

License

This package is provided under the MIT license.