Skip to content

A SwiftUI based custom sheet card to reuse in iOS application.

License

Notifications You must be signed in to change notification settings

mahmudahsan/SwiftUI-Action-Sheet-Card

Repository files navigation

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?

About

A SwiftUI based custom sheet card to reuse in iOS application.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages