Messages en ligne

Les messages intégrés constituent un moyen immédiat d'informer vos utilisateurs d'un évènement survenu lors de l'utilisation de l'application.

Message basique intégré

Les composants « Kirigami.InlineMessage » possèdent deux propriétés importantes dont il faut tenir compte :

• « visible » : par défaut, ceci est défini à « False », de façon à ce que le message n'apparaisse que lorsque que vous le souhaitez explicitement. Ceci peut être écraser si vous souhaitez le définir à « True ». Quand une message masqué intégré est défini comme devant être visible, vous obtiendrez une agréable animation.
• « text » : c'est ici que vous définissez le texte de votre message intégré.

import QtQuick 2.6
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.4 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
        }
    }

}

Types différents

Les messages intégrés standard sont comme ceux ci-dessus : ils ont un fond bleu et une icône par défaut. ut. Nous pouvons changer cela avec la propriété « type », qui nous permet de définir un autre type de message en ligne. Il existe quatre types parmi lesquels nous pouvons choisir parmi quatre types :

• Information (« Kirigami.MessageType.Information ») : la valeur par défaut, possédant un fond bleu, une icône « i ». Elle est utilisée pour annoncer un résultat ou dire quelque chose de général à l'utilisateur.
• Positif (« Kirigami.MessageType.Positive ») : possède un arrière-plan vert, une icône en forme de coche et indique que quelque chose s'est bien passé.
• Avertissement (« Kirigami.MessageType.Warning »): possède un fond orange, une icône en forme de point d'exclamation et peut être utilisé pour avertir l'utilisateur de quelque chose dont il doit d'occuper.
• Erreur (« Kirigami.MessageType.Error ») : possède un fond rouge, une icône en forme de croix et peut être utilisé pour dire à l'utilisateur que quelque chose a mal tourné.

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
	}

}

Personnalisation du texte et des icônes

Les messages intégrés prennent en charge le texte enrichi, pouvant être défini à l'aide de balises simples de type « HTML ». Cela vous permet d'ajouter certaines mises en forme de texte pour votre texte intégré de message ou même d'inclure un lien Internet externe si vous le souhaitez.

Kirigami.InlineMessage {
	Layout.fillWidth: true
	// Veuillez noter que lorsque vous utilisez des guillemets dans une chaîne de caractères, vous
	// devez utiliser des caractère d'échappement !
	text: "Check out <a href=\"https://kde.org\">KDE's website!<a/>"
	onLinkActivated: Qt.openUrlExternally(link)
	visible: true
}

Vous pouvez également personnaliser l'icône apparaissant en haut à gauche de votre message, en fournissant un nom d'icône système avec la propriété « icon.source ». Ces noms d'icônes doivent correspondre à des icônes installées sur votre système. Vous pouvez utiliser une application telle que Cuttlefish pour parcourir et rechercher les icônes disponibles sur votre votre système, ainsi que leurs noms.

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

Utilisation des actions dans les messages en ligne

Si vos messages doivent être interactifs, vous pouvez associer des actions de Kirigami à vos messages intégrés. Comme pour les pages, vous pouvez le faire en définissant la propriété « actions » du message intégré, soit grâce à un objet « Kirigami.Action », soit grâce un tableau contenant des composants « 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
			}
		]
	}

}

Boutons de fermeture

Les messages en ligne comportent un bouton de fermeture pouvant être utilisé pour les rejeter facilement.

Par défaut, le bouton de fermeture est masqué, mais il est possible de le remplacer en affectant la valeur « True » à la propriété « showCloseButton ».

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