Inline berichten

Berichten gerelateerd aan de inhoud in uw toepassing

Inline berichten leveren een onmiddellijke manier voor u op om uw gebruikers te informeren over iets wat gebeurde tijdens het gebruik van de toepassing.

Basis inline bericht

Kirigami.InlineMessage components have two important properties to be mindful of:

visible: dit is standaard gezet op false, zodat het bericht alleen verschijnt wanneer u het expliciet wilt. Indien gewenst kan dit aangepast worden door het op true te zetten. Wanneer een verborgen inline bericht op zichtbaar is gezet, krijgt u een leuke animatie.
text: here is where you set 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
        }
    }
}

Een venster die een knop toont die bij klikken een inline bericht laat verschijnen met lichtblauwe achtergrond met tekst erboven, nabij de bovenkant van de toepassing

Verschillende typen

Standard inline messages are like the ones above: they have a blue background and a default icon. We can change that with the type property, which lets us set our inline message to a different type. There are four types we can choose from:

Informatie (Kirigami.MessageType.Information): de standaard. Heeft een blauwe achtergrond, een 'i' pictogram en wordt gebruikt om een resultaat te melden of aan de gebruiker iets algemeens te vertellen. Het is niet nodig om het handmatig te zetten.
Positief (Kirigami.MessageType.Positive): heeft een groene achtergrond, pictogram met vinkje, en geeft aan dat iets goed ging.
Waarschuwing (Kirigami.MessageType.Warning): heeft een oranje achtergrond, een pictogram met uitroepteken, en kan gebruikt worden om de gebruiker te waarschuwen voor iets waar deze aan moet denken.
Fout (Kirigami.MessageType.Error): heeft een rode achtergrond, een pictogram met een kruis, en kan gebruikt worden om de gebruiker te vertellen dat er iets verkeerd ging.

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
    }

}

Een venster die alle vier inline typen melding in blauw, groen, oranje en rood laat zien

Tekst en pictogrammen aanpassen

Inline meldingen ondersteunen opgemaakte tekst, die gedefinieerd kan worden met eenvoudige HTML-regelopmaak. Dit biedt u het toevoegen van enige formattering aan uw inline berichttekst of zelfs invoegen van een externe webkoppeling als u dat wilt.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    // Merk op dat wanneer u aanhalingstekens in een tekenreeks wilt gebruiken u escape moet
    // gebruiken!
    text: "Check out <a href=\"https://kde.org\">KDE's website!<a/>"
    onLinkActivated: Qt.openUrlExternally(link)
    visible: true
}

Een inline melding met opgemaakte tekst en een hyperlink

You can also customise the icon that appears on the top left of your message by providing a system icon name for the icon.source property. These icon names should correspond to icons installed on your system; you can use an application such as Cuttlefish provided by plasma-sdk to browse and search the icons available on your system, and see what their names are.

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

Acties in inline meldingen gebruiken

If your messages need to be interactive, you can attach Kirigami actions to your inline messages. Like with pages, you can do this by setting the InlineMessage.actions property to either a Kirigami.Action or an array containing 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
            }
        ]
    }
}

Knoppen voor afsluiten

Inline meldingen leveren een sluitknop die gebruikt kan worden om ze gemakkelijk af te wijzen.

By default, this close button is hidden, but this can be overridden by setting the showCloseButton property to true.

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

Een inline melding met sluitknop aan de rechterkant

Formulierindeling

Actiewerkbalken