Swiftpack.co -  mahmudahsan/SwiftUI-Action-Sheet-Card as Swift Package
Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
mahmudahsan/SwiftUI-Action-Sheet-Card
A SwiftUI based custom sheet card to reuse in iOS application.
.package(url: "https://github.com/mahmudahsan/SwiftUI-Action-Sheet-Card.git", from: "0.3.0")

ActionSheetCard

iOS Swift Package Manager Twitter: @mahmudahsan

A SwiftUI based custom sheet card to reuse in iOS application.
If you want to learn how to build this type of component try the following tutorial.

Demo Screenshot

Features

  • Customizable items within the sheet card
  • Font can be changed
  • Foreground and background color can be changed
  • Out of focus area marked with transparent black color
  • Tapping out of focus area or other area will hide the sheet

Related Library

How to use

Add this Swift package to your project

https://github.com/mahmudahsan/SwiftUI-Action-Sheet-Card

Demo

Import and use

import SwiftUI
import ActionSheetCard

struct ContentView: View {
    @State var showingSheet = false
    
    var content: some View {
        VStack {
            Text("Custom Sheet")
                .font(.largeTitle)
                .padding()
            Button(action: {
                showingSheet = true
            }) {
                Text("Open Sheet")
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
    
    var sheetView: some View {
        ActionSheetCard(isShowing: $showingSheet,
                        items: [
                            ActionSheetCardItem(sfSymbolName: "play", label: "Play") {
                                print("Play Tapped")
                                showingSheet = false
                            },
                            ActionSheetCardItem(sfSymbolName: "stop", label: "Stop", foregrounColor: Color.red) {
                                print("Stop Tapped")
                                showingSheet = false
                            },
                            ActionSheetCardItem(sfSymbolName: "record.circle", label: "Record")
                        ])
    }
    
    var body: some View {
        ZStack {
            content
            sheetView
        }
    }
}

Steps

  1. Add import ActionSheetCard in your SwiftUI View
  2. Define a @State var showingSheet = false state
  3. Create the sheet view and pass the state as binding and define some items for the sheet
ActionSheetCard(isShowing: $showingSheet,
                        items: [
                            ActionSheetCardItem(sfSymbolName: "play", label: "Play") {
                                print("Play Tapped")
                                showingSheet = false
                            },
                            ActionSheetCardItem(sfSymbolName: "stop", label: "Stop", foregrounColor: Color.red) {
                                print("Stop Tapped")
                                showingSheet = false
                            },
                            ActionSheetCardItem(sfSymbolName: "record.circle", label: "Record")
                        ])
  1. Pass a callback to define the item, so when it is tapped the callback will execute
ActionSheetCardItem(sfSymbolName: "stop", label: "Stop", foregrounColor: Color.red) {
    // Callback
    print("Stop Tapped")
    showingSheet = false
}
  1. If there is no callback, the item will be in-active state
 // No Callback
 ActionSheetCardItem(sfSymbolName: "record.circle", label: "Record")
  1. Use the sheet in your main view within a ZStack, otherwise the black background view will not show correctly
var body: some View {
        ZStack {
            content
            sheetView
        }
    }

For more examples open /Demo/Demo.xcodeproj

  1. How to Change color and fonts of the sheet items
// If font and color is not provide, default values will be used
ActionSheetCardItem(
        label: "Stop",
        sfSymbolName: "stop",
        labelFont: Font.largeTitle,
        foregrounColor: Color.red,
        foregroundInactiveColor: Color.gray
    ) {
        print("Stop Tapped")
        showingSheet = false
    },
  1. How to Change color of the sheet card background
ActionSheetCard(
    isShowing: $showingSheet,
    items: [],
    backgroundColor: Color.red
)

Questions or feedback?

GitHub

link
Stars: 4
Last commit: Yesterday

Ad: Job Offers

iOS Software Engineer @ Perry Street Software
Perry Street Software is Jack’d and SCRUFF. We are two of the world’s largest gay, bi, trans and queer social dating apps on iOS and Android. Our brands reach more than 20 million members worldwide so members can connect, meet and express themselves on a platform that prioritizes privacy and security. We invest heavily into SwiftUI and using Swift Packages to modularize the codebase.

Release Notes

Change overall design and add more options to customize.
Yesterday

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API