SwiftUI package for displaying custom iOS 13 like modal.
It supports:
- drag gesture
- partial and full size modal
- light and dark mode
- iOS 13 like buttons
Requirements: iOS 13 or later, Xcode 11 or later.
Simplest way to install is to use Swift Package Manager.
In Xcode go to File -> Swift Packages -> Add Package Dependency and paste in the repo's url: https://github.com/ViktorMaric/HalfModal
Import HalfModal to your project: import HalfModal
You can put any content you want inside a modal.
HalfModal example:
ZStack {
Button(action: {
withAnimation {
self.showingHalfModal = true
}
}, label: {
Text("Show HalfModalView")
})
if showingHalfModal {
HalfModalView(content: AnyView(Text("content")), header: AnyView(Text("Header")), isPresented: $showingHalfModal)
}
}Pass HalfModalContent() View to the content parameter to get iOS 13 like buttons.
ZStack {
Button(action: {
withAnimation {
self.showingHalfModal = true
}
}, label: {
Text("Show HalfModalView")
})
if showingHalfModal {
HalfModalView(content: AnyView(HalfModalContent(priorButtons: [AnyView(
Button(action: {
withAnimation {
self.showingHalfModal = false
}
}, label: {
ModalButtonView(title: "Copy", image: Image(systemName: "doc.on.doc"), labelColor: .primary)
})),
AnyView(Button(action: {
withAnimation {
self.showingHalfModal = false
}
}, label: {
ModalButtonView(title: "Share", image: Image(systemName: "square.and.arrow.up"), labelColor: .primary)
}))
], secondaryButtons: [
AnyView(Button(action: {
withAnimation {
self.showingHalfModal = false
}
}, label: {
ModalButtonView(title: "Information", image: Image(systemName: "info.circle"), labelColor: .primary)
})),
AnyView(Button(action: {
withAnimation {
self.showingHalfModal = false
}
}, label: {
ModalButtonView(title: "Love", image: Image(systemName: "heart"), labelColor: .primary)
})),
AnyView(Button(action: {
withAnimation {
self.showingHalfModal = false
}
}, label: {
ModalButtonView(title: "Dislike", image: Image(systemName: "hand.thumbsdown"), labelColor: .primary)
}))])), header: AnyView(Text("Header")), isPresented: self.$showingHalfModal)
}
}Best practice:
- Use HalfModal if you would like to show more than three button. If you would like to show 3 or less buttons then the built in ActionSheet might be a better option.
- Use HalfModalContent() to show iOS 13 like buttons which are familiar to the iOS users.
Show the most frequently used buttons at the top.
Avoid using filled shapes.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent