A SwiftUI based custom sheet card to show any custom view inside the card in iOS application.
Add this Swift package to your project
https://github.com/mahmudahsan/SwiftUI-Action-Sheet-Custom-View-Card
import SwiftUI
import ActionSheetCustomViewCard
struct ContentView: View {
@State var showingSheet = false
var content: some View {
VStack {
Text("Custom Info Sheet")
.font(.largeTitle)
.padding()
Button(action: {
showingSheet = true
}) {
Text("Open Sheet")
}
}
.edgesIgnoringSafeArea(.all)
}
func hideActionSheet() {
showingSheet = false
}
var actionSheet: some View {
ActionSheetCustomViewCard(content: {
VStack {
HStack {
Spacer()
}
HStack {
ZStack (alignment: .top){
HStack (alignment: .top){
Button(action: {
self.hideActionSheet()
}, label: {
Image(systemName: "xmark")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 14, height: 14)
.foregroundColor(.black)
})
.frame(width: 20)
.padding(.top, 2)
Spacer()
}
Spacer()
Text("Why do I need to connect to do the job?")
.multilineTextAlignment(.center)
.font(Font.system(size: 16.0, weight: .semibold, design: .rounded))
.padding(.horizontal, 72)
.fixedSize(horizontal: false, vertical: true)
Spacer()
}
}
.padding(.bottom, 20)
.padding(.horizontal, 18)
Text("orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a tempor nibh. Morbi porttitor leo nulla, vitae fringilla mauris molestie vel. Fusce lobortis, quam id luctus rutrum, urna sem tincidunt augue, sit amet varius diam odio quis massa.")
.multilineTextAlignment(.leading)
.fixedSize(horizontal: false, vertical: true)
.padding(.horizontal, 40)
.foregroundColor(.gray)
}
},
isShowing: $showingSheet,
outOfFocusOpacity: 0.2
)
}
var sheetView: some View {
VStack {
Spacer()
actionSheet
}
}
var body: some View {
ZStack {
content
sheetView
}
}
}
import ActionSheetCustomViewCard
in your SwiftUI View@State var showingSheet = false
stateActionSheetCustomViewCard(content: {
VStack {
HStack {
Spacer()
}
HStack {
ZStack (alignment: .top){
HStack (alignment: .top){
Button(action: {
self.showingSheet = false
}, label: {
Image(systemName: "xmark")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 14, height: 14)
.foregroundColor(.black)
})
.frame(width: 20)
.padding(.top, 2)
Spacer()
}
Spacer()
Text("Why do I need to connect to do the job?")
.multilineTextAlignment(.center)
.font(Font.system(size: 16.0, weight: .semibold, design: .rounded))
.padding(.horizontal, 72)
.fixedSize(horizontal: false, vertical: true)
Spacer()
}
}
.padding(.bottom, 20)
.padding(.horizontal, 18)
Text("orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a tempor nibh. Morbi porttitor leo nulla, vitae fringilla mauris molestie vel. Fusce lobortis, quam id luctus rutrum, urna sem tincidunt augue, sit amet varius diam odio quis massa.")
.multilineTextAlignment(.leading)
.fixedSize(horizontal: false, vertical: true)
.padding(.horizontal, 40)
.foregroundColor(.gray)
}
},
isShowing: $showingSheet,
outOfFocusOpacity: 0.2
)
ZStack
, otherwise the black background view will not show correctlyvar body: some View {
ZStack {
content
sheetView
}
}
For more examples open /Demo/Demo.xcodeproj
ActionSheetCustomViewCard(content: {
// Add any custom view
// Text("Hello")
},
isShowing: $showingSheet,
outOfFocusOpacity: 0.2 // gray background opacity
)
link |
Stars: 6 |
Last commit: 2 years ago |
When the sheet shows within a TabView the content pushed a bit down.
Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics