Description

The ModalDialog component is the base component for message boxes and pickers.

API Properties

item content

The content can be added here

string title

Title of the message box

int buttonWidth

Width of buttons

int buttonHeight

Height of buttons

bool showCancelButton

Boolean to show/hide cancel button

bool showAcceptButton

Boolean to show/hide accept button

string cancelButtonText

Displayed button text for cancel button

string acceptButtonText

Displayed button text for accept button

string cancelButtonImage

Background image for cancel button

string cancelButtonImagePressed

Background image for pressed cancel button

string acceptButtonImage

Background image for accept button

string acceptButtonImagePressed

Background image for pressed accept button

int leftMargin

Left margin for the content

int rightMargin

Right margin for the content

int topMargin

Top margin for the content

int bottomMargin

Bottom margin for the content

int verticalOffset

The vertical offset for centering the dialog. By default it centers in the content area, keeping the toolbar unobscured.

row buttonRow

This property exposes the button row which holds the dialogs buttons. By setting both standard buttons invisible via showAcceptButton and showCancelButton you can add a custom row of buttons. Note that you have to call hide() and show() on your own then.

Signals

-

Functions

-

Example

AppPage {
    id: myPage

    // create ModalDialog:
    ModalDialog {
        id: myDialog

        title : qsTr("Are you sure?")
        buttonWidth: 200
        buttonHeight: 35
        showCancelButton: true
        showAcceptButton: true
        cancelButtonText: qsTr( "Yes" )
        acceptButtonText: qsTr( "No" )

        content: Rectangle {
            id: myContent
              
            width: 400
            height: 400
            color: "red"
        }

        // handle signals:
        onAccepted: {
            // do something
        }
        onRejected: {
            // do something
        }
    }
    // show on signal:
    Component.onCompleted: {
        myDialog.show()
    }
}