-
-
Notifications
You must be signed in to change notification settings - Fork 194
Wiki Usage
The usage is very simple. Use the .presentAlert
view modifier that expects AlertToast
.
import AlertToast
import SwiftUI
struct ContentView: View{
@State private var showAlert = false
var body: some View{
VStack{
Button("Show Alert"){
showAlert.toggle()
}
}
.presentAlert(isPresenting: $showAlert){
AlertToast(type: .regular, title: "Message Sent!")
}
}
}
Alert Toast using .presentAlert
modifier.
There are a few more parameters this modifier can have:
-
isPresenting
: Assign a Binding (MUST). -
duration
: default is 2, applying 0 will never dismiss the alert (Optional). -
tapToDismiss
: default is true, applying false will prevent tap to dismiss (Optional). -
alert
: expects to receive anAlertToast
(MUST). -
completion
: after dismissal, returnstrue
(Optional).
.presentAlert(isPresenting: $showAlert, duration: 2, tapToDismiss: true, alert: {
//AlertToast Goes Here
}, completion: { dismissed in
//Completion block after dismiss (returns true)
})
Some of the parameters are not needed for every Alert Toast, but for loading, for example, you don't want to let the user dismiss the loading alert nor it would auto dismiss after 2 seconds, or maybe you do, it's up to you.
So, for a loading alert, you want to apply those parameters:
import AlertToast
import SwiftUI
struct ContentView: View{
@State private var isLoading = false
var body: some View{
VStack{
Button("Login Button For Example"){
isLoading.toggle()
}
}
.presentAlert(isPresenting: $isLoading, duration: 0, tapToDismiss: false){
AlertToast(type: .loading)
}
}
}
.presentAlert(isPresenting: Binding<Bool>, duration: Double = 2, tapToDismiss: true, alert: { () -> AlertToast }, completion: { (Bool) -> () })
displayMode
There are 2 display modes right now:
- Alert: (Default) an alert that similar to Apple's Music alerts when you add a song to your library.
- HUD: HUD is a toast that drops from the top of the screen (like when connecting Airpods to iPhone).
type
There are 6 available alert types:
- Regular: text only (Title and Subtitle).
- Complete: animated checkmark.
- Error: animated xmark.
-
System Image: name image from
SFSymbols
. - Image: name image from Assets.
- Loading: Activity Indicator (Spinner).
title
& subTitle
The title and subTitle are optional String parameters. Decide if you want to have a description on the alert or not. For example, a loading alert doesn't have to have a title or subTitle.
titleFont
& subTitleFont
Those are Optional Font parameters. If you have your own fonts for a specific project you can use them too with Alert Toast.
boldTitle
As you guessed, this is an Optional Boolean to decide if you want a bold title. The default is TRUE.
A full AlertToast initialization:
AlertToast(displayMode: .alert/.hud, type: AlertType, title: Optional(String), subTitle: Optional(String), titleFont: Optional(Font), subTitleFont: Optional(Font), boldTitle: Optional(Bool))
AlertToast(type: .regular, title: Optional(String), subTitle: Optional(String))
AlertToast(type: .complete(Color)/.error(Color), title: Optional(String), subTitle: Optional(String))
AlertToast(type: .systemImage(String, Color), title: Optional(String), subTitle: Optional(String))
AlertToast(type: .image(String), title: Optional(String), subTitle: Optional(String))
//When using loading, set the duration at the .presentAlert modifier to 0.
AlertToast(type: .loading, title: Optional(String), subTitle: Optional(String))
var body: some View {
VStack{
if loginComplete{
Text("Welcome to AlertToast!")
.font(.largeTitle)
.bold()
.transition(.opacity)
}else{
// some content ...
Button("Some Login Button") {
showLoader.toggle()
//Simulate sign-in process:
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
//Dismiss the loader because the duration is 0!
showLoader.toggle()
//Replace with another
if password == "123456"{
showComplete.toggle()
}else{
showError.toggle()
}
}
}
}
// some content ...
}
.presentAlert(isPresenting: $showLoader, duration: 0, tapToDismiss: false){
AlertToast(type: .loading)
}
.presentAlert(isPresenting: $showError){
AlertToast(type: .error(.red), title: "Error", subTitle: "Incorrect password")
}
.presentAlert(isPresenting: $showComplete, alert: {
AlertToast(type: .complete(.green), title: "Signed In!")
}, completion: { dismissed in
if dismissed{
withAnimation(.spring()){
loginComplete = true
}
}
})
}