ConvergentContextMenu QML Type

Menu popup that appears as a tradional menu on desktop and as a bottom drawer mobile. More...

• List of all members, including inherited members

Properties

• actions : list<Action>
• headerContentItem : Item
• opened : bool

Signals

• closed()

Methods

• close()
• popup(parent, position)

Detailed Description

ConvergentContextMenu uses abstract QtQuick.Controls.Action and Kirigami.Action to build the traditional menu on desktop and the bottom drawer on mobile. Most properties of Kirigami.Action are supported including nested actions.

import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami
import org.kde.kirigamiaddons.components as Components
import org.kde.kirigamiaddons.formcard as FormCard

Components.ConvergentContextMenu {
    id: root

    headerContentItem: RowLayout {
        spacing: Kirigami.Units.smallSpacing
        Kirigami.Avatar { ... }

        Kirigami.Heading {
            level: 2
            text: "Room Name"
        }
    }

    Controls.Action {
        text: i18nc("@action:inmenu", "Simple Action")
    }

    Kirigami.Action {
        text: i18nc("@action:inmenu", "Nested Action")

        Controls.Action { ... }

        Controls.Action { ... }

        Controls.Action { ... }
    }

    Kirigami.Action {
        text: i18nc("@action:inmenu", "Nested Action with Multiple Choices")

        Kirigami.Action {
            text: i18nc("@action:inmenu", "Follow Global Settings")
            checkable: true
            autoExclusive: true // Since KF 6.10
        }

        Kirigami.Action {
            text: i18nc("@action:inmenu", "Enabled")
            checkable: true
            autoExclusive: true // Since KF 6.10
        }

        Kirigami.Action {
            text: i18nc("@action:inmenu", "Disabled")
            checkable: true
            autoExclusive: true // Since KF 6.10
        }
    }

    // custom FormCard delegate only supported on mobile
    Kirigami.Action {
        visible: Kirigami.Settings.isMobile
        displayComponent: FormCard.FormButtonDelegate { ... }
    }
}

When creating a menu for a ListView, avoid creating a ConvergentContextMenu for each delegate and instead create a global ConvergentContextMenu for the ListView or use a Component and dynamically instantiate the context menu on demand:

import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigamiaddons.components as Addons

ListView {
    model: 10
    delegate: Controls.ItemDelegate {
        text: index

        function openContextMenu(): void {
            const item = menu.createObject(Controls.Overlay.overlay, {
                index,
            });
            item.popup();
        }

        onPressAndHold: openContextMenu()

        // Since Qt 6.9
        Controls.ContextMenu.onRequested: (position) => openContextMenu()

        // Before Qt 6.9
        TapHandler {
            acceptedButtons: Qt.RightButton
            onSingleTapped: (eventPoint, button) => {
                openContextMenu();
            }
        }
    }

    Component {
        id: menu

        Addons.ConvergentContextMenu {
            required property int index

            Controls.Action {
                text: i18nc("@action:inmenu", "Action 1")
            }

            Kirigami.Action {
                text: i18nc("@action:inmenu", "Action 2")

                Controls.Action {
                    text: i18nc("@action:inmenu", "Sub-action")
                }
            }
        }
    }
}

Property Documentation

Signal Documentation

Method Documentation