Mensagens em linha

Exibe mensagens relacionadas ao conteúdo do seu aplicativo

As mensagens em linha fornecem uma maneira imediata de notificar seus usuários sobre algo que aconteceu durante o uso do aplicativo.

Mensagem em linha básica

Componentes Kirigami.InlineMessage têm duas propriedades importantes a serem consideradas:

visible: por padrão, esta opção é definida como falsa, para que a mensagem só apareça quando você explicitamente quiser. Isso pode ser substituído, se desejar, definindo-a como verdadeiro. Quando uma mensagem oculta em linha é definida como visível, você obtém uma bela animação.
text: aqui é onde você define o texto da sua mensagem em linha.

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

Uma janela mostrando um botão que, ao ser clicado, exibe uma mensagem em linha com fundo azul claro e texto acima, próximo ao topo do aplicativo

Tipos diferentes

As mensagens em linha padrão são como as acima: têm um fundo azul e um ícone padrão. Podemos alterar isso com a propriedade type, que nos permite definir um tipo diferente para nossa mensagem em linha. Há quatro tipos disponíveis:

Informações (Kirigami.MessageType.Information): o padrão. Possui um fundo azul, um ícone 'i' e é usado para anunciar um resultado ou informar ao usuário algo geral. Não é necessário defini-lo manualmente.
Positivo (Kirigami.MessageType.Positive): tem um fundo verde, ícone de visto e indica que algo deu certo.
Aviso (Kirigami.MessageType.Warning): tem um fundo laranja, um ícone de ponto de exclamação e pode ser usado para alertar o usuário sobre algo que ele deve ter em mente.
Erro (Kirigami.MessageType.Error): tem um fundo vermelho, um ícone de cruz e pode ser usado para informar ao usuário que algo deu 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
    }

}

Uma janela exibindo todos os quatro tipos de mensagens em linha em azul, verde, laranja e vermelho

Personalizando texto e ícones

Mensagens em linha suportam rich text, que pode ser definido com marcação simples semelhante a HTML. Isso permite que você adicione alguma formatação ao texto da sua mensagem em linha ou até mesmo inclua um link externo, se desejar.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    // Observe que quando você usa aspas em uma string, você terá que escapá-las!
    text: "Check out <a href=\"https://kde.org\">KDE's website!<a/>"
    onLinkActivated: Qt.openUrlExternally(link)
    visible: true
}

Uma mensagem em linha com texto formatado e um hiperlink

Você também pode personalizar o ícone que aparece no canto superior esquerdo da sua mensagem fornecendo um nome de ícone do sistema para a propriedade icon.source. Esses nomes de ícones devem corresponder aos ícones instalados no seu sistema; você pode usar um aplicativo como o Cuttlefish, fornecido pelo plasma-sdk para navegar e pesquisar os ícones disponíveis no seu sistema e ver seus nomes.

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

Usando ações em mensagens em linha

Se suas mensagens precisarem ser interativas, você pode anexar ações Kirigami às suas mensagens em linha. Assim como nas páginas, você pode fazer isso definindo a propriedade InlineMessage.actions como Kirigami.Action ou como um array contendo 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 fechar

As mensagens em linha fornecem um botão de fechar que pode ser usado para descartá-las facilmente.

Por padrão, este botão de fechar fica oculto, mas isso pode ser substituído definindo a propriedade showCloseButton como true.

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

Uma mensagem em linha com um botão de fechar à direita

Layouts de formulário

Barras de ferramentas de ação