Mensagens incorporadas

Mostrar mensagens relacionadas com o conteúdo na sua aplicação

As mensagens incorporadas oferece uma forma imediata de você notificar os seus utilizadores sobre algo que aconteceu ao usar a aplicação.

Mensagem incorporada básica

Os componentes Kirigami.InlineMessage têm duas propriedades importantes a ter em conta:

  • visible: por omissão, este valor está configurado como falso, pelo que a mensagem só irá aparecer quando quiser que o faça de forma explícita. Este comportamento poderá ser substituído se quiser configurá-lo como verdadeiro. Quando uma mensagem incorporada escondida for configurada para aparecer visível, irá obter uma animação bonita.
  • text: aqui é onde poderá definir o texto da sua mensagem incorporada.
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
        }
    }

}
Uma mensagem incorporada simples e um botão

Tipos diferentes

As mensagens-padrão incorporadas são como as que aparecem acima: as mesmas têm um fundo azul e um ícone predefinido. Poderemos alterar isso com a propriedade type, a qual nos permite configurar a nossa mensagem incorporada com um tipo diferente. Existem quatro tipos que poderemos escolher:

  • Informação (Kirigami.MessageType.Information): o predefinido. Tem um fundo azul, um ícone 'i' e é usado para anunciar um resultado ao dizer ao utilizador algo de genérico. Não é necessário configurá-lo manualmente.
  • Positivo (Kirigami.MessageType.Positive): tem um fundo verde, um ícone de aprovação e diz que algo decorreu com sucesso.
  • Aviso (Kirigami.MessageType.Warning): tem um fundo laranja, um ícone de exclamação e pode ser usado para avisar o utilizador sobre algo que eles deverão ter atenção.
  • Erro (Kirigami.MessageType.Error): tem um fundo vermelho, um ícone em cruz e poderá ser usado para avisar o utilizador que aconteceu algo de errado.
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
	}

}
Diferentes tipos de mensagens incorporadas

Personalizar o texto e os ícones

As mensagens incorporadas suportam texto formato, o qual poderá ser configurado com alguma formatação simples e semelhante ao HTML. Isto permite-lhe adicionar alguma formatação ao texto da sua mensagem incorporada ou ainda incluir uma hiperligação externa se o desejar.

Kirigami.InlineMessage {
	Layout.fillWidth: true
	// Lembre-se que quando usar aspas no texto terá de as escapar!
	text: "Check out <a href=\"https://kde.org\">KDE's website!<a/>"
	onLinkActivated: Qt.openUrlExternally(link)
	visible: true
}
Uma mensagem incorporada com texto formatado

Também poderá personalizar o ícone que aparece no canto superior-esquerdo da sua mensagem, fornecendo um nome de ícone do sistema na propriedade icon.source. Estes nomes de ícones deverão corresponder aos ícones instalados no seu sistema; poderá usar uma aplicação como o Cuttlefish para navegar e pesquisar os ícones disponíveis no seu sistema, bem como os seus nomes.

Kirigami.InlineMessage {
	Layout.fillWidth: true
	text: "Look at me! I look SPECIAL!"
	icon.source: "actor"
	visible: true     
}
Uma mensagem incorporada com um ícone específico

Usar acções nas mensagens incorporadas

Se as suas mensagens precisam de ser interactivas, poderá associar acções do Kirigami às suas mensagens incorporadas. Como acontece nas páginas, podê-lo-á fazer se configurar a propriedade actions da mensagem incorporada com uma Kirigami.Action ou com uma lista de 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
			}
		]
	}

}
Uma mensagem incorporada com duas acções

Botões de fecho

As mensagens incorporadas oferecem um botão de fecho que poderá ser usado para as descartar facilmente.

Por omissão, este botão de fecho está escondido, mas isso pode ser substituído ao configurar a propriedade showCloseButton como verdadeira.

Kirigami.InlineMessage {
	Layout.fillWidth: true
	text: "Please don't dismiss me..."
	showCloseButton: true
	visible: true     
}
Uma mensagem incorporada com o botão de fecho visível