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

Komponente Kirigami.InlineMessage imajo dve pomembni lastnosti, na kateri je treba paziti:

  • 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: tukaj nastavite besedilo vašega znotrajvrstičnega sporočila.
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

Standardna znotrajvrstična sporočila so podobna zgornjim: imajo modro ozadje in privzeto ikono. To lahko spremenimo z lastnostjo type, kar nam dovoli, da naše vneseno sporočilo nastavimo na drugo vrsto. Izbiramo lahko med štirimi vrstami:

  • 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

Ikono, ki je prikazana zgoraj levo od sporočila, lahko prilagodite tudi tako, da zagotovite ime sistemske ikone za lastnost icon.source. Ta imena ikon bi morala ustrezati ikonam, nameščenim v vašem sistemu; lahko uporabite aplikacijo, kot je Cuttlefish, ki jo nudi provided by plasma-sdk za brskanje in iskanje ikon, ki so na voljo v vašem sistemu, in ugotavljanje kakšna so njihova imena.

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

Če morajo biti vaša sporočila interaktivna, lahko svojim znotrajvrstičnim sporočilom priložite dejanja Kirigami. Tako kot pri straneh lahko to storite tako, da lastnost InlineMessage.actions nastavite na Kirigami.Action ali na vektor, ki vsebuje komponente 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
            }
        ]
    }
}
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.

Privzeto je ta gumb za zapiranje skrit, vendar je to lastnost mogoče preglasiti z nastavitvijo lastnosti showCloseButton na '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