https://github.com/nerdsupremacist/snap
A customizable Snapping Drawer à la Apple Maps.
100% in SwiftUI.
https://github.com/nerdsupremacist/snap
drawer swiftui
Last synced: about 1 month 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 5 years ago)
- Default Branch: develop
- Last Pushed: 2022-02-20T23:43:01.000Z (over 3 years ago)
- Last Synced: 2024-10-12T13:33:06.815Z (about 1 year 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.