Dialog QML Type

Popup dialog that is used for short tasks and user interaction. More...

• List of all members, including inherited members

Properties

• absoluteMaximumHeight : real
• absoluteMaximumWidth : real
• customFooterActions : T.Action
• dialogChildren : list<Item>
• dialogData : list<QtObject>
• flatFooterButtons : bool
• footerLeadingComponent : Component
• footerTrailingComponent : Component
• maximumHeight : real
• maximumWidth : real
• preferredHeight : real
• preferredWidth : real
• showCloseButton : bool

Detailed Description

Dialog consists of three components: the header, the content, and the footer.

By default, the header is a heading with text specified by the title property.

By default, the footer consists of a row of buttons specified by the standardButtons and customFooterActions properties.

The implicitHeight and implicitWidth of the dialog contentItem is the primary hint used for the dialog size. The dialog will be the minimum size required for the header, footer and content unless it is larger than maximumHeight and maximumWidth. Use preferredHeight and preferredWidth in order to manually specify a size for the dialog.

If the content height exceeds the maximum height of the dialog, the dialog's contents will become scrollable.

If the contentItem is a ListView, the dialog will take care of the necessary scrollbars and scrolling behaviour. Do not attempt to nest ListViews (it must be the top level item), as the scrolling behaviour will not be handled. Use ListView's header and footer instead.

Example for a selection dialog:

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as QQC2
import org.kde.kirigami as Kirigami

Kirigami.Dialog {
    title: i18n("Dialog")
    padding: 0
    preferredWidth: Kirigami.Units.gridUnit * 16

    standardButtons: Kirigami.Dialog.Ok | Kirigami.Dialog.Cancel

    onAccepted: console.log("OK button pressed")
    onRejected: console.log("Rejected")

    ColumnLayout {
        spacing: 0
        Repeater {
            model: 5
            delegate: QQC2.CheckDelegate {
                topPadding: Kirigami.Units.smallSpacing * 2
                bottomPadding: Kirigami.Units.smallSpacing * 2
                Layout.fillWidth: true
                text: modelData
            }
        }
    }
}

Example with scrolling (ListView scrolling behaviour is handled by the Dialog):

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as QQC2
import org.kde.kirigami as Kirigami

Kirigami.Dialog {
    id: scrollableDialog
    title: i18n("Select Number")

    ListView {
        id: listView
        // hints for the dialog dimensions
        implicitWidth: Kirigami.Units.gridUnit * 16
        implicitHeight: Kirigami.Units.gridUnit * 16

        model: 100
        delegate: QQC2.RadioDelegate {
            topPadding: Kirigami.Units.smallSpacing * 2
            bottomPadding: Kirigami.Units.smallSpacing * 2
            implicitWidth: listView.width
            text: modelData
        }
    }
}

There are also sub-components of the Dialog that target specific usecases, and can reduce boilerplate code if used:

See also PromptDialog and MenuDialog.

Property Documentation

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.PromptDialog {
    id: dialog
    title: i18n("Confirm Playback")
    subtitle: i18n("Are you sure you want to play this song? It's really loud!")

    standardButtons: Kirigami.Dialog.Cancel
    customFooterActions: [
        Kirigami.Action {
            text: i18n("Play")
            icon.name: "media-playback-start"
            onTriggered: {
                //...
                dialog.close();
            }
        }
    ]
}