SwiftUI-Drawer

A bottom-up drawer view.

Contents

• Installation
• Examples

Installation

For Swift Packages

Add a dependency in your your Package.swift file

    .package(name: "Drawer", url: "https://github.com/bwide/SwiftUI-Drawer", from: "1.3.0")

Examples

<img style="max-width:100%;" src=https://github.com/bwide/SwiftUI-Drawer/blob/main/Media/DrawerNoHandle.gif?raw=true width=200 align="right" />

Simple Drawer with no handle

        ZStack {
            Color.black
            GeometryReader {
                Drawer {
                    EmptyView()
                }
                .background(color: .blue)
                .rest(in: [135, $0.size.height])
            }
        }.edgesIgnoringSafeArea(.vertical)

<img style="max-width:100%;" src=https://github.com/bwide/SwiftUI-Drawer/blob/main/Media/Drawer.gif?raw=true width=200 align="right" /> Drawer with the default handle

        ZStack {
            Color.black
            GeometryReader {
                Drawer({
                    EmptyView()
                }, handle: {
                    DrawerHandles.defaultHandle
                })
                .background(color: .blue)
                .handle(height: 6, padding: 10)
                .rest(in: [135, $0.size.height])
            }
        }.edgesIgnoringSafeArea(.vertical)

<img style="max-width:100%;" src=https://github.com/bwide/SwiftUI-Drawer/blob/main/Media/DrawerIphoneSE.gif?raw=true width=200 align="right" />

Drawer with no rounded edges when reaching the top of the screen and a custom handle offset

        GeometryReader { geometry in
            Drawer({
                EmptyView()
            }, handle: {
                DrawerHandles.defaultHandle
            })
            .cornerRadius(radius)
            .onRest({ position in
                radius = position == geometry.size.height
                    ? 0
                    : 16
            })
            .onDrag({ _ in
                radius = 16
            })
            .background(color: .blue)
            .rest(in: [136, geometry.size.height])
            .handle(height: 6, padding: 10)
        }

<img style="max-width:100%;" src=https://github.com/bwide/SwiftUI-Drawer/blob/main/Media/DrawerScrollableContent.gif?raw=true width=200 align="right" />

Drawer with scrollable content

        ZStack {
            Color.black
            GeometryReader {
                Drawer({
                    ZStack {
                        Color.blue
                        VStack {
                            ForEach(0..<100) {
                                Text("item \($0)")
                            }
                        }
                    }
                }, handle: {
                    DrawerHandles.defaultHandle
                })
                    .scrollableContent()
                    .background(color: .blue)
                    .handle(height: 6, padding: 10)
                    .rest(in: [135, $0.size.height])
                    .interactive(in: [$0.size.height])
            }
        }.edgesIgnoringSafeArea(.vertical)

Simple Drawer with updating currentPosition

        ZStack {
            Color.black
            GeometryReader {
                Drawer(currentPosition: $pos) {
                    EmptyView()
                }
                .background(color: .blue)
                .rest(in: [135, $0.size.height])
            }
        }.edgesIgnoringSafeArea(.vertical)