BottomSheet
An iOS library for SwiftUI to create draggable sheet experiences similar to iOS applications like Maps and Stocks.
Install / Use
/learn @Wouter125/BottomSheetREADME
BottomSheet
An iOS library for SwiftUI to create draggable sheet experiences similar to iOS applications like Maps and Stocks.
Feature overview
The library currently supports;
- [x] Unlimited snap positions
- [x] Realtime position callback
- [x] Absolute and relative positioning
- [x] Customizable animation parameters
- [x] An optional sticky header
- [x] Views with and without a scrollview
How to install
Currently BottomSheet is only available through the Swift Package Manager or manual install.
-
Installation through Swift Package Manager can be done by going to
File > Add Packages. Then enter the following URL in the searchbar;https://github.com/Wouter125/BottomSheet. -
Manual installation can be done by cloning this repository and dragging all assets into your Xcode Project.
How to use
-
Import BottomSheet
-
Create a state property that contains the presentation state of the bottom sheet and one for the current selection;
@Published var isPresented = false
@Published var selectedDetent: BottomSheet.PresentationDetent = .medium
- Add the
BottomSheetViewto your SwiftUI view hierachy by using a view modifier;
.sheetPlus(
isPresented: $isPresented,
header: { },
main: {
EmptyView()
.presentationDetentsPlus(
[.height(244), .fraction(0.4), .medium, .large],
selection: $selectedDetent
)
}
)
- Optionally receive the current panel position with a callback, change the background color, show a drag indicator or limit the background interaction based on the height;
.sheetPlus(
isPresented: $isPresented,
background: (
Color(UIColor.secondarySystemBackground)
),
onDrag: { translation in
print(translation)
},
header: { EmptyView() },
main: {
EmptyView()
.presentationDetentsPlus(
[.height(244), .fraction(0.4), .medium, .large],
selection: $selectedDetent
)
.presentationDragIndicatorPlus(.visible)
.presentationBackgroundInteractionPlus(.enabled(upThrough: .height(380)))
}
)
Interface
| Modifier | Type | Default | Description | |--------------------------|---------------------|---------|-----------------------------------------------------------------------------------| | animationCurve.mass | Double | 1.2 | The mass of the object attached to the spring. | | animationCurve.stiffness | Double | 200 | The stiffness of the spring. | | animationCurve.damping | Double | 25 | The spring damping value. |
Example
To give you an idea of how to use this library you can use the example that is attached to this repo. Simply clone it and open the BottomSheetExample folder in Xcode.
Roadmap
- Add landscape support
- Add iPad support
Related Skills
node-connect
352.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
111.1kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
352.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
352.0kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
