Wiadomości w treści

Wyświetl wiadomości związane z treścią twojej aplikacji

Wiadomości w wierszu dają bezpośredni sposób na powiadamianie twoich użytkowników o czymś, co się stało, podczas używania aplikacji.

Podstawowa wiadomość w treści

Składniki Kirigami.InlineMessage zawierają dwie ważne właściwości, o których warto pamiętać:

  • visible: domyślnie jest to ustawione na false, tak aby wiadomość pojawiała się tylko wtedy, gdy wyraźnie tego chcesz. Można to zmienić jeśli chcesz, ustawiając ją na true. Gdy ukryta wiadomość w wierszu jest ustawiona na widoczną, to będziesz widzieć ładną animację.
  • text: to miejsce, gdzie nadajesz tekst swojej wiadomości w treści.
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
        }
    }

}
Prosta wiadomość i przycisk w wierszu

Różne rodzaje

Standardowe wiadomości w wierszu są takie jak te powyżej: mają niebieskie tła i domyślną ikonę. Możemy to zmienić poprzez właściwość type, która umożliwi nam ustawienie naszej wiadomości w treści na inny rodzaj. Istnieją cztery rodzaje do wyboru:

  • Informacja (Kirigami.MessageType.Information): domyślnie ma niebieskie tło, ikonę ‘i’ i jest używane do ogłoszenia wyniku lub powiedzenia czegoś ogólnego. Nie jest wymagane jej ręczne ustawienie.
  • Pozytyw (Kirigami.MessageType.Positive): ma zielone tło, ikonę ptaszka i wskazuje na to, że coś poszło dobrze.
  • Uwaga (Kirigami.MessageType.Warning): ma pomarańczowe tło, ikonę wykrzyknika i może być użyte, aby ostrzec użytkownika o czymś, na co powinien zwrócić uwagę.
  • Błąd (Kirigami.MessageType.Error): ma czerwone tło, ikonę krzyża i może być użyty, aby powiedzieć użytkownikowi, że coś poszło nie tak.
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
	}

}
Różne rodzaje wiadomości w treści

Dostosowywanie tekstu i ikon

Wiadomości w treści obsługują formatowany tekst, który można określić tak prosto jak HTML. Umożliwia to dodanie formatowania do twoich wiadomości w treści, a nawet umieszczenie odnośnika na zewnątrz do sieci.

Kirigami.InlineMessage {
	Layout.fillWidth: true
	// Pamiętaj, że jeśli chcesz użyć cudzysłowów w ciągu znaków, to będziesz musiał je wykluczyć z
	// przetwarzania!
	text: "Check out <a href=\"https://kde.org\">KDE's website!<a/>"
	onLinkActivated: Qt.openUrlExternally(link)
	visible: true
}
Wiadomość w wierszu z tekstem formatowanym

Możesz także ustawić ikonę, która pojawia się w górnym lewym narożniku twojej wiadomości, określając nazwę ikony we właściwości icon.source. Nazwy tych ikon powinny odpowiadać nazwą ikon wgranych w twoim systemie; możesz użyć takiego narzędzia jak Cuttlefish do przeglądania i wyszukiwania ikon dostępnych na twoim systemie, a także do odczytania ich nazw.

Kirigami.InlineMessage {
	Layout.fillWidth: true
	text: "Look at me! I look SPECIAL!"
	icon.source: "actor"
	visible: true     
}
Wiadomość w wierszu z określoną ikoną

Używanie działań w wiadomościach w wierszu

Jeśli twoje wiadomości muszą być interaktywne, to możesz doczepić działania Kirigami do swoich wiadomości w wierszu. Tak jak w przypadku stron, możesz to zrobić ustawiając właściwość wiadomości w wierszu actions na albo Kirigami.Action albo macierz zawierającą składniki 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
			}
		]
	}

}
Wiadomość w wierszu z dwoma działaniami

Przyciski zamykające

Wiadomości w treści dają przycisk zamykania, którego można łatwo użyć do ich odwoływania.

Domyślnie, ten przycisk zamykania jest ukryty, lecz można to zmienić, ustawiając właściwość showCloseButton na true.

Kirigami.InlineMessage {
	Layout.fillWidth: true
	text: "Please don't dismiss me..."
	showCloseButton: true
	visible: true     
}
Wiadomość w wierszu z przyciskiem do jej zamknięcia