Mensagens incorporadas

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

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
    }

}

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
}

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, que vem no pacote plasma-sdk 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
}

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

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
}