• Home
• Felgo
• AppModal

AppModal

A modal dialog that covers the whole application. More...

• List of all members, including inherited members

Properties

• backgroundColor : color
• closeOnBackgroundClick : bool
• closeWithBackButton : bool
• cornerClipColor : color
• fullscreen : bool
• modalHeight : real
• openedStatusBarStyle : int
• overlayColor : color
• overlayOpacity : real
• pushBackContent : Item

Signals

• closed()
• opened()
• willClose(var event)

Methods

• void close()
• void open()

Detailed Description

The AppModal can be used to display a modal sheet on top of your app. The AppModal can be used as a container for any custom content.

 // Some container
 Item {
   id: container
   property int value: 1

   AppModal {
     id: modal
     // ...

     property int doThis: container.value // use the id to access the value
     property int notThat: parent.value // <-- do not reference the parent of the AppModal directly
   }
 }

Example Usage

Here are examples of how to use the AppModal item in your own apps.

Basic Blank AppModal

This example shows how to add a very basic fullscreen modal sheet. For a modal with custom height, refer to Partial modal with custom height.

 import QtQuick
 import Felgo

 App {
   // Set the background of the app to black (for the default iOS modal)
   color: "#000"

   NavigationStack {
     id: navigationStack

     AppPage {
       title: "Main Page"

       // Button to open the modal
       AppButton {
         text: "Open Modal"
         anchors.centerIn: parent
         onClicked: modal.open()
       }

       AppModal {
         id: modal
         // Set your main content root item
         pushBackContent: navigationStack

         // Button to close the modal
         AppButton {
           text: "Close"
           anchors.centerIn: parent
           onClicked: modal.close()
         }
       }
     }
   }
 }

AppModal with Navigation Bar on iOS and Android

For fullscreen modals, it is common to display a navigation bar with title and options like close. This example shows how to do this, together with a platform switch to test both iOS and Android right on your mobile.

 import QtQuick
 import Felgo

 App {
   // Set the background of the app to black (for the default iOS modal)
   color: "#000"

   NavigationStack {
     id: navigationStack

     AppPage {
       title: "Main Page"

       // We add a button for open the modal and to change the platform
       Column {
         anchors.centerIn: parent

         AppButton {
           text: "Open Modal"
           onClicked: modal.open()
         }
         AppButton {
           text: "Platform: " + Theme.platform
           onClicked: {
             Theme.platform = Theme.platform == "ios" ? "android" : "ios"
             Theme.colors.statusBarStyle = Theme.platform == "ios" ? Theme.colors.statusBarStyleBlack : Theme.colors.statusBarStyleWhite
           }
         }
       }

       AppModal {
         id: modal
         // Set your main content root item
         pushBackContent: navigationStack

         // Add any custom content for the modal
         NavigationStack {
           AppPage {
             title: "Modal"
             rightBarItem: TextButtonBarItem {
               text: "Close"
               textItem.font.pixelSize: sp(16)
               onClicked: modal.close()
             }
           }
         }
       }
     }
   }
 }

Partial modal with custom height

You can also use the AppModal item to display a modal sheet with a custom height, that only partially covers the screen.

 import QtQuick
 import Felgo

 App {
   // Set the background of the app to black (for the default iOS modal)
   color: "#000"

   NavigationStack {
     id: navigationStack

     AppPage {
       title: "Main Page"

       // Button to open the modal
       AppButton {
         text: "Open Modal"
         anchors.centerIn: parent
         onClicked: modal.open()
       }

       AppModal {
         id: modal
         // Set your main content root item
         pushBackContent: navigationStack
         // Disable fullscreen to use as partial modal
         fullscreen: false
         // Set a custom height for the modal
         modalHeight: dp(300)

         // Button to open the modal
         AppButton {
           text: "Close"
           anchors.centerIn: parent
           onClicked: modal.close()
         }
       }
     }
   }
 }

Property Documentation

 import Felgo
 import QtQuick

 App {
   // Set the background of the app to black (for the default iOS modal)
   color: "#000"

   Navigation {
     id: navigation

     NavigationItem {
       NavigationStack {
         AppPage {
           // ... page content

           AppModal {
             id: modal
             // All the contents of this item will be pushed back and overlayed on iOS
             pushBackContent: navigation
           }
         }
       }
     }
     // ... more NavigationItems
   }
 }

Signal Documentation

 onWillClose: {
   event.accepted = false
 }

Method Documentation