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

Description

The framework provides the ability to present a view as a popup in one of three predefined areas - Top, Centre 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
• CentrePopup - presents popup view from the center
• BottomPopup - presents popup view from the bottom

Methods in Custom Popup Declaration

The TopPopup, CentrePopup and BottomPopup protocols define several methods:

// DESCRIPTION: Defines a view to act as a popup

var body: some View

// OPTIONAL
// DESCRIPTION: Configures the popup. If not called, the popup inherits the configuration defined during the setup

func configurePopup(config: Config) -> Config 

// OPTIONAL
// DESCRIPTION: Triggered every time a popup is at the top of the stack

func onFocus()

// OPTIONAL
// DESCRIPTION: Triggered when a popup is dismissed

func onDismiss()

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, CentrePopup, 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: dismiss) { Text("Dismiss") } 
        }
        .padding(.vertical, 20)
        .padding(.leading, 24)
        .padding(.trailing, 16)
    }
   }

3. Implement configurePopup(config: Config) -> Config Method (Optional)

Customize the popup appearance using configuration methods specific to the popup type. struct BottomCustomPopup: BottomPopup {
var body: some View { HStack(spacing: 0) { Text("Hello World") Spacer() Button(action: dismiss) { Text("Dismiss") } } .padding(.vertical, 20) .padding(.leading, 24) .padding(.trailing, 16) } func configurePopup(config: BottomPopupConfig) -> BottomPopupConfig { config .horizontalPadding(20) .bottomPadding(42) .cornerRadius(16) } ... }

4. On Dismiss

5. On Focus

See also

• Setup
• Popup Presentation
• Popup Dismissal
• Popup Configuration