Mensajes en línea

Los mensajes en línea proporcionan un modo inmediato para que pueda notificar a los usuarios sobre algo que haya ocurrido durante el uso de la aplicación.

Mensaje en línea básico

Los componentes Kirigami.InlineMessage tienen dos propiedades importantes a tener en cuenta:

• visible: tiene el valor false de forma predeterminada, por lo que el mensaje solo aparece cuando se indique de forma explícita. Este comportamiento se puede modificar asignándole el valor true. Cuando un mensaje en línea oculto se define como visible, se mostrará con una bonita animación.
• text: aquí es donde se define el texto del mensaje en línea.

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

}

Diferentes tipos

Los mensajes en línea estándares son como los anteriores: tienen un fondo azul y un icono predeterminado. Podemos cambiar esto con la propiedad type, que nos permite hacer que nuestro mensaje en línea sea de un tipo diferente. Hay cuatro tipos entre los que podemos elegir:

• Información (Kirigami.MessageType.Information): el predeterminado. Tiene un fondo azul, un icono 'i' y se usa para anunciar un resultado o para comunicarle al usuario algo general. No es necesario definirlo manualmente.
• Positivo (Kirigami.MessageType.Positive): tiene un fondo verde, un icono con una marca de verificación e indica que algo ha ido bien.
• Advertencia (Kirigami.MessageType.Warning): tiene un fondo naranja, un icono con un signo de exclamación y se puede usar para advertir al usuario sobre algo que debería tener en cuenta.
• Error (Kirigami.MessageType.Error): tiene un fondo rojo, un icono con una equis y se puede usar para comunicar al usuario que algo ha ido mal.

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
	}

}

Personalización de texto y de iconos

Los mensajes en línea permiten el uso de texto enriquecido, que puede constar de etiquetas sencillas de tipo HTML. Esto le permite añadir cierto formato al texto de los mensajes en línea e incluso insertar enlaces web externos, si así lo desea.

Kirigami.InlineMessage {
	Layout.fillWidth: true
	// Tenga en cuenta que cuando use comillas en una cadena de texto, tendrá que usar secuencias de
	// escape con ellas.
	text: "Check out <a href=\"https://kde.org\">KDE's website!<a/>"
	onLinkActivated: Qt.openUrlExternally(link)
	visible: true
}

Puede personalizar el icono que aparece en la parte superior izquierda del mensaje proporcionando el nombre de un icono del sistema en la propiedad icon.source. Estos nombres de icono deben corresponder a los iconos instalados en el sistema. Puede usar una aplicación (como Cuttlefish) para explorar y buscar los iconos disponibles en su sistema, y así ver cuáles son sus nombres.

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

Uso de acciones en mensajes en línea

Si el mensaje debe ser interactivo, puede adjuntar acciones de Kirigami a los mensajes en línea. Como ocurre con las páginas, puede hacerlo definiendo la propiedad actions del mensaje en línea a Kirigami.Action o a una matriz que contenga componentes 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
			}
		]
	}

}

Botones de cierre

Los mensajes en línea proporcionan un botón de cierre que se puede usar para descartarlos fácilmente.

De forma predeterminada, este botón de cierre está oculto, pero puede modificar este comportamiento definiendo la propiedad showCloseButton a true.

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