Skip to main content
Preskoči na vsebino

Znotrajvrstična sporočila

Prikaži sporočila, povezana z vsebino, v programu

Znotrajvrstična sporočila zagotavljajo takojšen način, da uporabnike obvestite o nečem, kar se je zgodilo med uporabo aplikacije.

Osnovno znotrajvrstično sporočilo

Kirigami.InlineMessage components have two important properties to be mindful of:

  • Lastnost vidno visible: je privzeto nastavljeno na false, tako da se sporočilo prikaže le, ko to izrecno želite. To je mogoče preglasiti, tako da ga nastavite na true. Ko je skrito znotrajvrstično sporočilo nastavljeno na vidno, dobite lepo animacijo.
  • text: here is where you set the text of your inline message.
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
        }
    }
}
Okno, ki prikazuje gumb, ki ob kliku naredi vgrajeno sporočilo z svetlo modrim ozadjem, se pojavi z besedilom nad njim blizu vrha aplikacije

Različne vrste

Standard inline messages are like the ones above: they have a blue background and a default icon. We can change that with the type property, which lets us set our inline message to a different type. There are four types we can choose from:

  • Informacije ('Kirigami.MessageType.Information'): privzeto. Ima modro ozadje, ikono "i" in se uporablja za napoved rezultata ali povedati uporabniku nekaj splošnega. Ni ga treba ročno nastaviti.
  • Pozitivno ('Kirigami.MessageType.Positive'): ima zeleno ozadje, ikono kljukice in označuje, da je šlo nekaj dobro.
  • Opozorilo ('Kirigami.MessageType.Warning'): ima oranžno ozadje, ikono z znakom klicaja in se lahko uporablja za opozarjanje uporabnika na nekaj, kar bi morali biti pozorni.
  • Error ('Kirigami.MessageType.Error'): ima rdečo ozadje, ikono križa in se lahko uporabi za to, da se uporabniku pove, da je šlo nekaj narobe.
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
    }

}
Okno, ki prikazuje vse štiri vrste znotrajvrstičnih sporočil v modri, zeleni, oranžni in rdeči barvi

Prilagajanje besedila in ikon

Znotrajvrstična sporočila podpirajo obogateno besedilo, ki ga lahko določite s preprostim html-podobnim označevanjem. To vam omogoča, da dodate nekaj oblikovanja v besedilo v vrstici sporočila ali celo vključite zunanjo spletno povezavo, če to želite.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    // Upoštevajte, da boste morali pri uporabi narekovajev v nizu uporabiti ubežni znak!
    text: "Check out <a href=\"https://kde.org\">KDE's website!<a/>"
    onLinkActivated: Qt.openUrlExternally(link)
    visible: true
}
Znotrajvrstično sporočilo z obogatenim besedilom in hiperpovezavo

You can also customise the icon that appears on the top left of your message by providing a system icon name for the icon.source property. These icon names should correspond to icons installed on your system; you can use an application such as Cuttlefish provided by plasma-sdk to browse and search the icons available on your system, and see what their names are.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    text: "Look at me! I look SPECIAL!"
    icon.source: "actor"
    visible: true
}
Znotrajvrstično sporočilo z ikono po meri

Uporaba dejanj v znotrajvrstičnih sporočilih

If your messages need to be interactive, you can attach Kirigami actions to your inline messages. Like with pages, you can do this by setting the InlineMessage.actions property to either a Kirigami.Action or an array containing Kirigami.Action components.

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
            }
        ]
    }
}
Znotrajvrstično sporočilo z dvema dejanjema

Gumbi za zapiranje

Znotrajvrstična sporočila zagotavljajo gumb za zapiranje, ki ga lahko uporabite za enostaven izhod.

By default, this close button is hidden, but this can be overridden by setting the showCloseButton property to true.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    text: "Please don't dismiss me..."
    showCloseButton: true
    visible: true
}
Znotrajvrstično sporočilo z gumbom za zapiranje na desni strani