https://github.com/nerdsupremacist/snap

A customizable Snapping Drawer à la Apple Maps.

 100% in SwiftUI.
https://github.com/nerdsupremacist/snap

drawer swiftui

Last synced: 11 days ago
JSON representation

A customizable Snapping Drawer à la Apple Maps.

 100% in SwiftUI.

• Host: GitHub
• URL: https://github.com/nerdsupremacist/snap
• Owner: nerdsupremacist
• License: mit
• Created: 2020-07-21T21:57:12.000Z (over 4 years ago)
• Default Branch: develop
• Last Pushed: 2022-02-20T23:43:01.000Z (over 2 years ago)
• Last Synced: 2024-10-12T13:33:06.815Z (about 1 month ago)
• Topics: drawer, swiftui
• Language: Swift
• Homepage:
• Size: 4.12 MB
• Stars: 717
• Watchers: 13
• Forks: 35
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  



# Snap

A customizable Snapping Drawer à la Apple Maps, Apple Music, Stocks, Overcast, etc.. 100% in SwiftUI 

This is heavily inspired by [Rideau](https://github.com/muukii/Rideau) and based on this [Gist](https://gist.github.com/mshafer/7e05d0a120810a9eb49d3589ce1f6f40) by [mshafer](https://github.com/mshafer).

Here's a short demo where I reconstructed the Apple Maps UI:



## Installation

### Swift Package Manager

You can install Snap via [Swift Package Manager](https://swift.org/package-manager/) by adding the following line to your `Package.swift`:

```swift

import PackageDescription

let package = Package(

    [...]

    dependencies: [

        .package(url: "https://github.com/nerdsupremacist/Snap.git", from: "0.1.0")

    ]

)

```

## Usage

Snap allows you to set up either 1, 2 or 3 Snapping points and customize your UI depending on where you are.

For example if we want to recreate the Apple Maps UI we could write the following:

```swift

import MapKit

import Snap

import SwiftUI

struct ContentView: View {

    @State private var region = MKCoordinateRegion(...)

    var body: some View {

        ZStack {

            Map(coordinateRegion: $region)

            SnapDrawer(large: .paddingToTop(24), medium: .fraction(0.4), tiny: .height(100), allowInvisible: false) { state in

                VStack(alignment: .leading, spacing: 10) {

                    SearchBar()

                    if state != .tiny {

                        Favorites()

                            .transition(.scale)

                    }

                    if state == .large {

                        Recents()

                            .transition(.scale)

                    }

                }

            }

        }

    }

}

```

Feel free to explore the API yourself and play around with it.

Other features include:

- Listening to state changes via a `@Binding`

- Setting a background view

## Contributions

Contributions are welcome and encouraged!

## License

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