Inline messages

Inline messages are an immediate way to tell your users about something that happened while they use the application.

#Basic inline message

Kirigami.InlineMessage components have two important properties:

• visible: false by default, so that the message only appears when you explicitly want it to. You can override this by setting it to true. When a hidden inline message is made visible, it appears with an animation.
• text: the text of your inline message.

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

Kirigami.Page {

    ColumnLayout {
        Kirigami.InlineMessage {
            id: inlineMessage
            Layout.fillWidth: true
            text: "Hello! I am a siiiiiiimple lil' inline message!"
        }

        Controls.Button {
            text: "Show inline message!"
            onClicked: inlineMessage.visible = !inlineMessage.visible
        }
    }
}

#Different types

Standard inline messages are like the ones above: with SonicDE's Silver color schemes they have a blue background and a default icon. You can change this with the type property, which sets the message to a different type. There are four types to choose from:

• Information (Kirigami.MessageType.Information): the default. Has a blue background and an "i" icon, and is used to announce a result or tell the user something general. You don't need to set it explicitly.
• Positive (Kirigami.MessageType.Positive): has a green background and a tick icon, and indicates that something went well.
• Warning (Kirigami.MessageType.Warning): has an orange background and an exclamation-mark icon, and warns the user about something they should keep in mind.
• Error (Kirigami.MessageType.Error): has a red background and a cross icon, and tells the user that something has gone wrong.

ColumnLayout {

    Kirigami.InlineMessage {
        Layout.fillWidth: true
        text: "Hello! Let me tell you something interesting!"
        visible: true
    }

    Kirigami.InlineMessage {
        Layout.fillWidth: true
        text: "Hey! Let me tell you something positive!"
        type: Kirigami.MessageType.Positive
        visible: true
    }

    Kirigami.InlineMessage {
        Layout.fillWidth: true
        text: "Hmm... You should keep this in mind!"
        type: Kirigami.MessageType.Warning
        visible: true
    }
   
    Kirigami.InlineMessage {
        Layout.fillWidth: true
        text: "Argh!!! Something went wrong!!"
        type: Kirigami.MessageType.Error
        visible: true
    }

}

#Customizing text and icons

Inline messages support rich text, defined with simple HTML-like markup. This lets you format the text of your inline message, or even include a web link.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    // Note that when you use quotes in a string you will have to escape them!
    text: "Check out <a href=\"https://sonicde.org\">SonicDE's website!</a>"
    onLinkActivated: Qt.openUrlExternally(link)
    visible: true
}

You can also change the icon in the top left of your message by giving a system icon name to the icon.source property. The names must match icons installed on your system; to browse and search the available icons and see their names, use Icon Explorer (iconexplorer) from sonic-theme-sdk.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    text: "Look at me! I look SPECIAL!"
    icon.source: "actor"
    visible: true
}

#Using actions in inline messages

If your messages need to be interactive, you can attach Kirigami actions to them. As with pages, set the InlineMessage.actions property to a Kirigami.Action or an array of Kirigami.Action components.

ColumnLayout {

    Kirigami.InlineMessage {
        id: actionsMessage
        Layout.fillWidth: true
        visible: true

        readonly property string initialText: "Something is hiding around here..."
        text: initialText

        actions: [
            Kirigami.Action {
                enabled: actionsMessage.text == actionsMessage.initialText
                text: qsTr("Add text")
                icon.name: "list-add"
                onTriggered: {
                    actionsMessage.text = actionsMessage.initialText + " Peekaboo!";
                }
            },
            Kirigami.Action {
                enabled: actionsMessage.text != actionsMessage.initialText
                text: qsTr("Reset text")
                icon.name: "list-remove"
                onTriggered: actionsMessage.text = actionsMessage.initialText
            }
        ]
    }
}

#Close buttons

Inline messages have a close button for dismissing them easily. It is hidden by default; show it by setting the showCloseButton property to true.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    text: "Please don't dismiss me..."
    showCloseButton: true
    visible: true
}