org::kde::kirigami::PlaceholderMessage Class Reference

Inherits ColumnLayout.

Properties
alias	helpfulAction
ActionIconGroup	icon
alias	text

Detailed Description

A placeholder message indicating that a list view is empty.

The message comprises a label with lightened text, an optional icon above the text, and an optional button below the text which can be used to easily show the user what to do next to add content to the view.

The top-level component is a ColumnLayout, so additional components items can simply be added as child items and they will be positioned sanely.

Example usage:

 used as a "this view is empty" message
import org.kde.kirigami 2.12 as Kirigami

ListView {
    id: listView
    model: [...]
    delegate: [...]

    Kirigami.PlaceholderMessage {
        anchors.centerIn: parent
        width: parent.width - (Kirigami.Units.largeSpacing * 4)

        visible: listView.count == 0

        text: "There are no items in this list"
    }
}

 Used as a "here's how to proceed" message
import org.kde.kirigami 2.12 as Kirigami

ListView {
    id: listView
    model: [...]
    delegate: [...]

    Kirigami.PlaceholderMessage {
        anchors.centerIn: parent
        width: parent.width - (Kirigami.Units.largeSpacing * 4)

        visible: listView.count == 0

        text: "Add an item to proceed"

        helpfulAction: Kirigami.Action {
            iconName: "list-add"
            text: "Add item..."
            onTriggered: {
                [...]
            }
        }
    }
    [...]
}

 Used as a "there was a problem here" message
import org.kde.kirigami 2.12 as Kirigami

Kirigami.Page {
    id: root
    readonly property bool networkConnected: [...]

    Kirigami.PlaceholderMessage {
        anchors.centerIn: parent
        width: parent.width - (Kirigami.Units.largeSpacing * 4)

        visible: root.networkConnected

        icon.name: "network-disconnect"
        text: "Network disconnected; unable to load content"
    }
}

import org.kde.kirigami 2.12 as Kirigami

 Used as a loading indicator
Kirigami.Page {
    id: root
    readonly property bool loading: [...]
    readonly property int completionStatus: [...]

    Kirigami.PlaceholderMessage {
        anchors.centerIn: parent
        width: parent.width - (Kirigami.Units.largeSpacing * 4)

        visible: root.loading

        icon.name: "my-awesome-app-icon"
        text: "Loading this awesome app"

        ProgressBar {
            Layout.preferredWidth: Kirigami.Units.gridUnit * 20
            value: root.completionStatus
            from: 0
            to: 100
        }
    }
}

import org.kde.kirigami 2.12 as Kirigami

 Used as a "Here's what you do next" button
Kirigami.Page {
    id: root

    Kirigami.PlaceholderMessage {
        anchors.centerIn: parent
        width: parent.width - (Kirigami.Units.largeSpacing * 4)

        visible: root.loading

        helpfulAction: Kirigami.Action {
            iconName: "list-add"
            text: "Add item..."
            onTriggered: {
                [...]
            }
        }
    }
}

Since

2.12

Definition at line 140 of file PlaceholderMessage.qml.

Property Documentation

alias org::kde::kirigami::PlaceholderMessage::helpfulAction

helpfulAction: QtQuickControls2 Action An action that helps the user proceed.

Typically used to guide the user to the next step for adding content or items to an empty view.

Optional; if undefined, no button will appear below the text label.

Since

5.70

Definition at line 174 of file PlaceholderMessage.qml.

ActionIconGroup org::kde::kirigami::PlaceholderMessage::icon

icon: QVariant The icon to show above the text label.

Accepts "icon.name" and "icon.source"

Optional; if undefined, the message will have no icon. Falls back to undefined if the specified icon is not valid or cannot be loaded.

Since

5.70

See also

Icon::source

Definition at line 164 of file PlaceholderMessage.qml.

alias org::kde::kirigami::PlaceholderMessage::text

text: string The text to show as a placeholder label

Optional; if not defined, the message will have no text. Useful when you only want to display an icon, action button, and/or other custom content

Since

5.70

Definition at line 151 of file PlaceholderMessage.qml.

---

The documentation for this class was generated from the following file:

• PlaceholderMessage.qml