PopupUI

Easy to Toast & Popup any View by SwiftUI！

SwiftUI 实现的弹窗控件，简单易用！《中文文档》

SwiftUI で作られた PopupView は、簡単で使いやすいです！『日本語のREADME』

Screenshot

Center Prompt	Center Confirmation	Bottom Confirmation
Bottom Input	Sidebar	Top Notification
Top Prompt	Background Color	Code Generation

　

Installation

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/pikacode/PopupUI.git")
]

Cocoapods

pod 'PopupUI'

Usage

import PopupUI

Basic Usage

1.Adding

Add .popupUI() after a view to pop up within it's scope:

var body: some View {
    VStack {
        ...
    }
    .popupUI()  // <-- Add to the view
}

Or add to the root view, only once to pop up throughout the entire application:

@main
struct PopupUI_demoApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .popupUI()  // <-- Add to the root view
        }
    }
}

2.Showing

PopupUI
    .show(Text("Hello, PopupUI!"))

3.Hiding

PopupUI
    .hide()     // Hide the last popup 

​

Advanced Usage

Show with custom parameters

Customize various parameters:

PopupUI
    .show(YourCustomView())                 // The view to be shown
    .from(.bottom)                          // The direction from which the view is shown
    .stay(2)                                // The duration of the view staying
    .to(.center, .easeOut(duration: 0.3))   // The direction to which the view is hidden and the animation
    .background(Color.black.opacity(0.3))   // The background view
    .padding(24)                            // The padding of the view
    .isSafeArea(true)                       // Whether to avoid the safe area
    .id("Unique Popup ID")                  // The unique identifier, when not passed, the same id is used by default, so only one popup can be displayed at a time, you can display multiple popups at the same time by setting different ids
    .isAvoidKeyboard(true)                  // Whether to avoid the keyboard
    .isBackgroundOpaque(true)               // Whether to prevent the user from interacting with the background view
    .dismissWhenTapBackground(true)         // Whether to hide when the background view is tapped
    .scaleFrom(0.5)                         // show: value -> 1
    .scaleTo(0.5)                           // hide: 1 -> value
    .opacityFrom(0.5)                       // show: value -> 1
    .opacityTo(0.5)                         // hide: 1 -> value
    .duplicatedIdBehavior(.ignore)          // When the id is duplicated: .ignore: the lasteat will be ignored / .replace: the lasteat will replace the previous one
    .dismissCallback { id in                // The callback when the view is hidden
        print("Popup dismissed: \(id)")
    }

Or display a view and customize the parameters through the closure:

PopupUI
    .show {
        VStack {
            ...
        }
    } config: { config in
        config.from = ...
    }

Hide a specified popup

PopupUI
    .hide("Unique Popup ID")    // Hide the specified popup

Global Configuration

Customize the default parameters through PopupConfiguration.default to simplify the popup code:

let configuration = PopupConfiguration()
configuration.stay = 2
configuration.to = .center
...
PopupConfiguration.default = configuration

Or:

PopupConfiguration
    .default
    .stay(2)
    .to(.center)
    ...

Define several style templates

Define all styles in App as several templates to simplify the popup code:

extension PopupConfiguration {      //PopupStyle
    static var center: PopupConfiguration {
            PopupConfiguration()
                        .from(.center)
                        .to(.center, .easeOut)
                        ...
    }
    
    static var bottom: PopupConfiguration {
            PopupConfiguration()
                        .from(.bottom)
                        .isOpaque(false)
                        ...                                    
    }
}
                                    
PopupUI
    .show(CenterView())
    .config(.center)        //.style(.center)

PopupUI
    .show(BottomView())
    .config(.bottom)