Inline berichten

Berichten gerelateerd aan de inhoud in uw toepassing

Inline berichten leveren een onmiddellijke manier voor u op om uw gebruikers te informeren over iets wat gebeurde tijdens het gebruik van de toepassing.

Basis inline bericht

Kirigami.InlineMessage componenten hebben twee belangrijke eigenschappen om aan te denken:

  • visible: dit is standaard gezet op false, zodat het bericht alleen verschijnt wanneer u het expliciet wilt. Dit kan veranderd worden als u dat wilt door het op true te zetten. Wanneer een verborgen inline bericht op zichtbaar is gezet, krijgt u een leuke animatie.
  • text: hier is waar u de tekst van uw inline bericht zet.
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
        }
    }

}
Een eenvoudig inline bericht en knop

Verschillende typen

Standaard inline berichten zijn als die hierboven: ze hebben een blauwe achtergrond en een standaard pictogram. We kunnen dat wijzigen met de eigenschap type, die ons ons inline bericht op een ander type laat zetten. Er zijn vier typen waar we uit kunnen kiezen:

  • Informatie (Kirigami.MessageType.Information): de standaard. Heeft een blauwe achtergrond, een 'i' pictogram en wordt gebruikt om een resultaat te melden of aan de gebruiker iets algemeens te vertellen. Het is niet nodig om het handmatig te zetten.
  • Positief (Kirigami.MessageType.Positive): heeft een groene achtergrond, pictogram met vinkje, en geeft aan dat iets goed ging.
  • Waarschuwing (Kirigami.MessageType.Warning): heeft een oranje achtergrond, een pictogram met uitroepteken, en kan gebruikt worden om de gebruiker te waarschuwen voor iets waar deze aan moet denken.
  • Fout (Kirigami.MessageType.Error): heeft een rode achtergrond, een pictogram met een kruis, en kan gebruikt worden om de gebruiker te vertellen dat er iets verkeerd ging.
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
	}

}
Verschillende inline berichttypen

Tekst en pictogrammen aanpassen

Inline meldingen ondersteunen opgemaakte tekst, die gedefinieerd kan worden met eenvoudige HTML-regelopmaak. Dit biedt u het toevoegen van enige formattering aan uw inline berichttekst of zelfs invoegen van een externe webkoppeling als u dat wilt.

Kirigami.InlineMessage {
	Layout.fillWidth: true
	// Merk op dat wanneer u aanhalingstekens in een tekenreeks wilt gebruiken u escape moet gebruiken!
	text: "Check out <a href=\"https://kde.org\">KDE's website!<a/>"
	onLinkActivated: Qt.openUrlExternally(link)
	visible: true
}
Een inline melding met opgemaakte tekst

U kunt ook het pictogram dat linksboven van uw melding verschijnt aanpassen door een systeempictogramnaam te leveren voor de eigenschap icon.source. Deze pictogramnamen zouden overeen moeten komen met op uw systeem geïnstalleerde pictogrammen; u kunt een toepassing zoals Cuttlefish gebruiken om te bladeren en te zoeken naar de beschikbare pictogrammen op uw systeem en wat hun namen zijn.

Kirigami.InlineMessage {
	Layout.fillWidth: true
	text: "Look at me! I look SPECIAL!"
	icon.source: "actor"
	visible: true     
}
Een inline melding met een gespecificeerd pictogram

Acties in inline meldingen gebruiken

Als uw meldingen interactief moeten zijn, kunt u Kirigami acties toevoegen aan uw inline meldingen. Net als met pagina's kunt u dit doen door het zetten van de eigenschap actions van de inline meldingen op ofwel een Kirigami.Action of een array dat Kirigami.Action componenten bevat.

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

}
Een inline melding met twee acties

Knoppen voor afsluiten

Inline meldingen leveren een sluitknop die gebruikt kan worden om ze gemakkelijk af te wijzen.

Standaard is deze sluitknop verborgen, maar dit kan overschreven worden door de eigenschap showCloseButton op true te zetten.

Kirigami.InlineMessage {
	Layout.fillWidth: true
	text: "Please don't dismiss me..."
	showCloseButton: true
	visible: true     
}
Een inline melding met tonen van sluitknop