Qt Reference Documentation

QML CommonDialog Element

Provides a dialog with the platform-style title and button areas. More...

Inherits Dialog

Inherited by DatePickerDialog, QueryDialog, SelectionDialog, TimePickerDialog, and TumblerDialog.

This element was introduced in Qt Quick Components 1.0.

Properties

Signal Handlers

Detailed Description

CommonDialog is a convenience component that provides a dialog with the platform-style title and button areas. You only have to define the title text, the title icon and the button texts. CommonDialog handles their layout and styling automatically.

Use Dialog::content property for defining the actual dialog content. The content area does not have any default margins, so if you need to apply margins it is recommended to use one of the padding properties from platformStyle context property.

Using CommonDialog

The example below shows how to use CommonDialog.

 CommonDialog {
     id: dialog
     titleText: "Title text"
     titleIcon: "list4.svg"
     buttonTexts: ["OK", "Cancel"]
     content: Rectangle {
         width: 300
         height: 200
         anchors.horizontalCenter: parent.horizontalCenter
         color: "#30ff0000" // this makes the margins visible on the ui
         Grid {
             id: grid

             property int itemWidth: (width - platformStyle.paddingSmall) / 2
             property int itemHeight: (height - platformStyle.paddingSmall) / 2

             anchors.fill: parent
             anchors.margins: platformStyle.paddingMedium
             spacing: platformStyle.paddingSmall
             columns: 2

             Rectangle { color: "red"; width: grid.itemWidth; height: grid.itemHeight }
             Rectangle { color: "blue"; width: grid.itemWidth; height: grid.itemHeight }
             Rectangle { color: "green"; width: grid.itemWidth; height: grid.itemHeight }
             Rectangle { color: "yellow"; width: grid.itemWidth; height: grid.itemHeight }
         }
     }

 }

The screenshot below illustrates the result of the code snippet.

If you want to create a dialog with customized title or button areas use the Dialog component instead. The screnshot below illustrates a dialog with the customized title area.

Property Documentation

buttonTexts : variant

The dialog's button texts defined in a string list. You can define any number of button texts, but it is not recommended to use more than three of them.

If this property is left empty the button area will not be visible.


titleIcon : url

The dialog's title icon.


titleText : string

The dialog's title text.


Signal Handler Documentation

CommonDialog::buttonClicked ( int index )

This signal is emitted when one of the buttons is clicked. The index parameter holds the index of the clicked button. The index is the same as the index of the button text in the buttonTexts property.