Popup Declaration

Na wszystko, co się zdarzy, masz gotowy, przywieziony z Ziemi schemat. Jeżeli jakiś szczegół nie pasuje, to go po prostu odrzucasz.

Popup Declaration

Overview

The framework provides the ability to present a view as a popup in one of three predefined areas - Top, Center or Bottom.
The presentation area must be chosen during the popup declaration, by conforming to one of the selected protocols:

• TopPopup - presents popup view from the top
• CenterPopup - presents popup view from the center
• BottomPopup - presents popup view from the bottom

Methods in Custom Popup Declaration

The TopPopup, CenterPopup and BottomPopup protocols define several methods:

• var body: some View
  • Defines a view to act as a popup
• func configurePopup(config: Config) -> Config
  • Optional
  • Configures the popup. If not called, the popup inherits the configuration defined during the setup
• func onFocus()
  • Optional
  • Triggered every time a popup is at the top of the stack
• func onDismiss()
  • Optional
  • Triggered when a popup is dismissed

Step-by-Step Guide

1. Declare a structure for your Popup
   • Decide where the popup will appear: top, center, or bottom.
   • Confirm to one of the protocols: TopPopup, CenterPopup, or BottomPopup.
     
     

   struct BottomCustomPopup: BottomPopup {
       ...
   }

2. Declare the body variable
   • Define the design of your popup inside the body variable.
     
     

   struct BottomCustomPopup: BottomPopup {    
       var body: some View {
           HStack(spacing: 0) {
               Text("Hello World")
               Spacer()
               Button(action: { Task { await dismissLastPopup() }}) { Text("Dismiss") } 
           }
           .padding(.vertical, 20)
           .padding(.leading, 24)
           .padding(.trailing, 16)
       }
   }

3. (Optional) Implement configurePopup(config: Config) -> Config method
   • Customize the popup appearance using configuration methods specific to the popup type.
   • The list of available customization methods can be found here.
     
     

   struct BottomCustomPopup: BottomPopup {    
       var body: some View {
           HStack(spacing: 0) {
               Text("Hello World")
               Spacer()
               Button(action: { Task { await dismissLastPopup() }}) { Text("Dismiss") }
           }
           .padding(.vertical, 20)
           .padding(.leading, 24)
           .padding(.trailing, 16)
       }
       func configurePopup(config: BottomPopupConfig) -> BottomPopupConfig {
           config
               .horizontalPadding(20)
               .bottomPadding(42)
               .cornerRadius(16)
       }
   }

4. (Optional) Implement onDismiss() method
   • Declare a custom action when popup is dismissed.
     
     

   struct BottomCustomPopup: BottomPopup {    
       var body: some View {
           HStack(spacing: 0) {
               Text("Hello World")
               Spacer()
               Button(action: { Task { await dismissLastPopup() }}) { Text("Dismiss") }
           }
           .padding(.vertical, 20)
           .padding(.leading, 24)
           .padding(.trailing, 16)
       }
       func configurePopup(config: BottomPopupConfig) -> BottomPopupConfig {
           config
               .horizontalPadding(20)
               .bottomPadding(42)
               .cornerRadius(16)
       }
       func onDismiss() {
           print("Popup dismissed")
       }
   }

5. (Optional) Implement onFocus() method
   • Declare a custom action that is triggered every time the popup is at the top of the stack.
     
     

   struct BottomCustomPopup: BottomPopup {    
       var body: some View {
           HStack(spacing: 0) {
               Text("Hello World")
               Spacer()
               Button(action: { Task { await dismissLastPopup() }}) { Text("Dismiss") }
           }
           .padding(.vertical, 20)
           .padding(.leading, 24)
           .padding(.trailing, 16)
       }
       func configurePopup(config: BottomPopupConfig) -> BottomPopupConfig {
           config
               .horizontalPadding(20)
               .bottomPadding(42)
               .cornerRadius(16)
       }
       func onDismiss() {
           print("Popup dismissed")
       }
       func onFocus() {
           print("Popup is now active")
       }
   }

See also

• Setup
• Popup Presentation
• Popup Dismissal
• Popup Configuration