Kirigami Addons Delegates QML Types

Delegates for lists and grids in Kirigami applications.

Import the module with an alias in a QML file that displays a collection:

import org.kde.kirigamiaddons.delegates as Delegates

Displaying a list

Use RoundedItemDelegate for a list or grid item that opens another page or selects an item. It provides a rounded background for hover, focus, and selection states. When it is the direct delegate of a ListView or GridView, it uses the view to size itself and highlight the current item.

import QtQuick
import org.kde.kirigamiaddons.delegates as Delegates

ListView {
    id: foldersView
    model: ["Inbox", "Archive"]

    delegate: Delegates.RoundedItemDelegate {
        required property int index
        required property string modelData

        text: modelData
        icon.name: "folder"
        onClicked: foldersView.currentIndex = index
    }
}

In a drag and drop workflow, the view's delegate can be an Item that stays in the list or grid while its child RoundedItemDelegate is reparented during a drag. The child does not receive the view's attached properties automatically. Bind listView: wrapper.ListView or gridView: wrapper.GridView to retain the built-in sizing and highlighting, or set those properties on the child explicitly.

Adding a subtitle or extra content

The default DefaultContentItem shows the delegate's icon and text. Replace contentItem with SubtitleContentItem to add a second line. Pass the containing delegate through itemDelegate so the content uses its text, icon, font, and enabled state:

Delegates.RoundedItemDelegate {
    id: messageDelegate
    text: i18nc("@title", "Project update")
    icon.name: "mail-message"

    contentItem: Delegates.SubtitleContentItem {
        itemDelegate: messageDelegate
        subtitle: i18nc("@info", "Received today")
    }
}

For a more specialized layout, place DefaultContentItem inside a RowLayout with other controls and assign the layout to contentItem.

Choices, unread items, and trees

Use CheckDelegate for an independent on/off choice and RadioDelegate for a choice in a group. Both show an indicator and expose the inherited checked and toggled members. Put radio delegates in a ButtonGroup when only one choice may be selected. Store the checked state in the model when delegates may be recreated as the user scrolls.

IndicatorItemDelegate adds an accent bar for an unread item. It is intended as a direct ListView delegate; set its required unread property. The view supplies index from the model. Use RoundedTreeDelegate with a KDescendantsProxyModel to show expandable tree rows in a ListView. It expects the descendant level and expansion roles from that model.

CheckDelegate: An CheckDelegate providing a modern look and feel.
DefaultContentItem: Content item which is used by default in the RoundedItemDelegate and IndicatorItemDelegate.
IndicatorItemDelegate
RadioDelegate: An CheckDelegate providing a modern look and feel.
RoundedItemDelegate: An ItemDelegate providing a modern look and feel.
RoundedTreeDelegate: Rounded item delegate meant to be used in combination with a ListView and a KDescendantsProxyModel to create a TreeView.
SubtitleContentItem

Kirigami Addons Delegates QML Types

#Displaying a list

#Adding a subtitle or extra content

#Choices, unread items, and trees

#Contents

Displaying a list

Adding a subtitle or extra content

Choices, unread items, and trees

Contents