Messaggi in linea

I messaggi in linea ti forniscono un modo immediato per poter notificare agli utenti qualcosa che sta accadendo mentre utilizzano l'applicazione.

Messaggi in linea di base

I componenti Kirigami.InlineMessage hanno due importanti proprietà di cui tenere conto:

• visible: per impostazione predefinita è impostato su false, in modo che il messaggio venga visualizzato solo quando lo desideri esplicitamente. Questo può essere sovrascritto se lo desideri impostandolo su true. Quando un messaggio in linea nascosto è impostato per essere visibile, ottieni una bella animazione.
• testo: qui è dove imposti il ​​testo del tuo messaggio in linea.

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
        }
    }
}

Tipi diversi

I messaggi in linea standard sono come quelli sopra: hanno uno sfondo blu e un'icona predefinita. Possiamo cambiarlo con la proprietà type, che ci consente di impostare il nostro messaggio in linea su un tipo diverso. Ci sono quattro tipi tra cui possiamo scegliere:

• Informazione (Kirigami.MessageType.Information): il predefinito. Ha uno sfondo blu e un'icona i. Viene utilizzato per annunciare un risultato o per dire all'utente qualcosa di generale. Non è necessario impostarlo manualmente.
• Positivo (Kirigami.MessageType.Positive): ha uno sfondo verde, un'icona con un segno di spunta. Indica che qualcosa è andato bene.
• Attenzione (Kirigami.MessageType.Warning): ha uno sfondo arancione e un'icona a punto esclamativo. Può essere utilizzato per avvisare l'utente di qualcosa di cui dovrebbe essere consapevole.
• Errore (Kirigami.MessageType.Error): ha uno sfondo rosso e un'icona a croce. Può essere utilizzato per dire all'utente che qualcosa è andato storto.

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
    }

}

Personalizzazione di testo e icone

I messaggi in linea supportano il testo formattato, che può essere definito con dei semplici marcatori come nell'HTML. Questo ti permette di aggiungere una formattazione al testo dei tuoi messaggi in linea, o persino di includere un collegamento a un sito web esterno, se vuoi.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    // Nota che quando in una stringa utilizzi le virgolette, allora devi usare un carattere di
    // escape!
    text: "Check out <a href=\"https://kde.org\">KDE's website!<a/>"
    onLinkActivated: Qt.openUrlExternally(link)
    visible: true
}

Puoi anche personalizzare l'icona che appare in alto a sinistra del tuo messaggio fornendo un nome di icona di sistema per la proprietà icon.source. Questi nomi di icone dovrebbero corrispondere alle icone installate sul tuo sistema; puoi utilizzare un'applicazione come Cuttlefish fornita da plasma-sdk per sfogliare e cercare le icone disponibili sul tuo sistema e vedere quali sono i loro nomi.

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

Usare le azioni nei messaggi in linea

Se i tuoi messaggi devono essere interattivi, puoi allegare azioni Kirigami ai tuoi messaggi in linea. Come con le pagine, puoi farlo impostando la proprietà InlineMessage.actions su un Kirigami.Action o un array contenente Componenti Kirigami.Action.

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
            }
        ]
    }
}

Pulsante di chiusura

I messaggi in linea forniscono un pulsante di chiusura, che può essere usato per rimuoverli con facilità.

Per impostazione predefinita, questo pulsante di chiusura è nascosto, ma può essere ignorato impostando la proprietà showCloseButton su "true".

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