Kirigami2

PlaceholderMessage.qml
1/*
2 * SPDX-FileCopyrightText: 2020 Nate Graham <nate@kde.org>
3 *
4 * SPDX-License-Identifier: LGPL-2.0-or-later
5 */
6
7import QtQuick
8import QtQuick.Layouts
9import QtQuick.Controls as QQC2
10import org.kde.kirigami as Kirigami
11import "private" as P
12
13/**
14 * @brief A placeholder message indicating that a view is empty.
15 *
16 * The message comprises a label with text, an optional explanation below the main text,
17 * an optional icon above all the text, and an optional button below all the text which
18 * can be used to easily show the user what to do next to add content to the view.
19 *
20 * The explanatory text is selectable and can contain clickable links. In this latter
21 * case, client code must implement an ``onLinkactivated:`` signal handler or the links
22 * will not work.
23 *
24 * The top-level component is a ColumnLayout, so additional components items can
25 * simply be added as child items and they will be positioned sanely.
26 *
27 * Example usage:
28 * @code{.qml}
29 ** used as a "this view is empty" message
30 * import org.kde.kirigami as Kirigami
31 *
32 * ListView {
33 * id: listView
34 * model: [...]
35 * delegate: [...]
36 *
37 * Kirigami.PlaceholderMessage {
38 * anchors.centerIn: parent
39 * width: parent.width - (Kirigami.Units.largeSpacing * 4)
40 *
41 * visible: listView.count === 0
42 *
43 * text: "There are no items in this list"
44 * }
45 * }
46 * @endcode
47 * @code{.qml}
48 ** Used as a "here's how to proceed" message
49 * import org.kde.kirigami as Kirigami
50 *
51 * ListView {
52 * id: listView
53 * model: [...]
54 * delegate: [...]
55 *
56 * Kirigami.PlaceholderMessage {
57 * anchors.centerIn: parent
58 * width: parent.width - (Kirigami.Units.largeSpacing * 4)
59 *
60 * visible: listView.count === 0
61 *
62 * text: "Add an item to proceed"
63 *
64 * helpfulAction: Kirigami.Action {
65 * icon.name: "list-add"
66 * text: "Add item..."
67 * onTriggered: {
68 * [...]
69 * }
70 * }
71 * }
72 * [...]
73 * }
74 * @endcode
75 * @code{.qml}
76 ** Used as a "there was a problem here" message
77 * import org.kde.kirigami as Kirigami
78 *
79 * Kirigami.Page {
80 * id: root
81 * readonly property bool networkConnected: [...]
82 *
83 * Kirigami.PlaceholderMessage {
84 * anchors.centerIn: parent
85 * width: parent.width - (Kirigami.Units.largeSpacing * 4)
86 *
87 * visible: root.networkConnected
88 *
89 * icon.name: "network-disconnect"
90 * text: "Unable to load content"
91 * explanation: "Please try again later."
92 * " Visit <a href="https://foo.com/com>this link</a> for more details."
93 * onLinkActivated: link => Qt.openUrlExternally(link)
94 * }
95 * }
96 * @endcode
97 * @code{.qml}
98 * import org.kde.kirigami as Kirigami
99 *
100 ** Used as a "Here's what you do next" button
101 * Kirigami.Page {
102 * id: root
103 *
104 * Kirigami.PlaceholderMessage {
105 * anchors.centerIn: parent
106 * width: parent.width - (Kirigami.Units.largeSpacing * 4)
107 *
108 * visible: root.loading
109 *
110 * helpfulAction: Kirigami.Action {
111 * icon.name: "list-add"
112 * text: "Add item..."
113 * onTriggered: {
114 * [...]
115 * }
116 * }
117 * }
118 * }
119 * @endcode
120 * @inherit QtQuick.Layouts.ColumnLayout
121 * @since 2.12
122 */
123ColumnLayout {
124 id: root
125
126 enum Type {
127 Actionable,
128 Informational
129 }
130
131//BEGIN properties
132 /**
133 * @brief This property holds the PlaceholderMessage type.
134 *
135 * The type of the message. This can be:
136 * * ``Kirigami.PlaceholderMessage.Type.Actionable``: Makes it more attention-getting. Useful when the user is expected to interact with the message.
137 * * ``Kirigami.PlaceholderMessage.Type.Informational``: Makes it less prominent. Useful when the message in only informational.
138 *
139 * default: `if a helpfulAction is provided this will be of type Actionable otherwise of type Informational.`
140 *
141 * @since 5.94
142 */
143 property int type: actionButton.action?.enabled
144 ? PlaceholderMessage.Type.Actionable
145 : PlaceholderMessage.Type.Informational
146
147 /**
148 * @brief This property holds the text to show in the placeholder label.
149 *
150 * Optional; if not defined, the message will have no large text label
151 * text. If both text: and explanation: are omitted, the message will have
152 * no text and only an icon, action button, and/or other custom content.
153 *
154 * @since 5.70
155 */
156 property string text
157
158 /**
159 * @brief This property holds the smaller explanatory text to show below the larger title-style text
160 *
161 * Useful for providing a user-friendly explanation on how to proceed.
162 *
163 * Optional; if not defined, the message will have no supplementary
164 * explanatory text.
165 *
166 * @since 5.80
167 */
168 property string explanation
169
170 /**
171 * @brief This property provides an icon to display above the top text label.
172 * @note It accepts ``icon.name`` and ``icon.source`` to set the icon source.
173 * It is suggested to use ``icon.name``.
174 *
175 * Optional; if undefined, the message will have no icon.
176 * Falls back to `undefined` if the specified icon is not valid or cannot
177 * be loaded.
178 *
179 * @see org::kde::kirigami::private::ActionIconGroup
180 * @since 5.70
181 */
182 readonly property P.ActionIconGroup icon: P.ActionIconGroup {
183 width: Math.round(Kirigami.Units.iconSizes.huge * 1.5)
184 height: Math.round(Kirigami.Units.iconSizes.huge * 1.5)
185 color: Kirigami.Theme.textColor
186 }
187
188 /**
189 * @brief This property holds an action that helps the user proceed.
191 * Typically used to guide the user to the next step for adding
192 * content or items to an empty view.
193 *
194 * Optional; if undefined, no button will appear below the text label.
195 *
196 * @property QtQuick.Controls.Action helpfulAction
197 * @since 5.70
198 */
199 property alias helpfulAction: actionButton.action
200
201 /**
202 * This property holds the link embedded in the explanatory message text that
203 * the user is hovering over.
204 */
205 readonly property alias hoveredLink: label.hoveredLink
206
207 /**
208 * This signal is emitted when a link is hovered in the explanatory message
209 * text.
210 * @param The hovered link.
211 */
212 signal linkHovered(string link)
213
214 /**
215 * This signal is emitted when a link is clicked or tapped in the explanatory
216 * message text.
217 * @param The clicked or tapped link.
218 */
219 signal linkActivated(string link)
220//END properties
221
222 spacing: Kirigami.Units.largeSpacing
223
224 Component.onCompleted: _announce();
225 onVisibleChanged: {
226 _announce();
227 }
228 function _announce()
229 {
230 if (visible && Accessible.announce) {
231 // Accessible.announce was added in Qt 6.8.0
232 if (root.text.length > 0)
233 Accessible.announce(root.text);
234 if (root.explanation.length > 0)
235 Accessible.announce(root.explanation);
236 }
237 }
238
239 Kirigami.Icon {
240 visible: source !== undefined
241 opacity: root.type === PlaceholderMessage.Type.Actionable ? 1 : 0.5
242
243 Layout.alignment: Qt.AlignHCenter
244 Layout.preferredWidth: root.icon.width
245 Layout.preferredHeight: root.icon.height
246
247 color: root.icon.color
248
249 source: {
250 if (root.icon.source.length > 0) {
251 return root.icon.source
252 } else if (root.icon.name.length > 0) {
253 return root.icon.name
254 }
255 return undefined
256 }
257 }
258
259 Kirigami.Heading {
260 text: root.text
261 visible: text.length > 0
262
263 type: Kirigami.Heading.Primary
264 opacity: root.type === PlaceholderMessage.Type.Actionable ? 1 : 0.65
265
266
267 Layout.fillWidth: true
268 horizontalAlignment: Qt.AlignHCenter
269 verticalAlignment: Qt.AlignVCenter
270
271 wrapMode: Text.WordWrap
272 }
273
274 Kirigami.SelectableLabel {
275 id: label
276
277 text: root.explanation
278 visible: root.explanation.length > 0
279 opacity: root.type === PlaceholderMessage.Type.Actionable ? 1 : 0.65
280
281 horizontalAlignment: Qt.AlignHCenter
282 wrapMode: Text.WordWrap
283
284 Layout.fillWidth: true
285
286 onLinkHovered: link => root.linkHovered(link)
287 onLinkActivated: link => root.linkActivated(link)
288 }
289
290 QQC2.Button {
291 id: actionButton
292
293 Layout.alignment: Qt.AlignHCenter
294 Layout.topMargin: Kirigami.Units.gridUnit
295
296 visible: action?.enabled ?? false
297 }
298}
A placeholder message indicating that a view is empty.
Type type(const QSqlDatabase &db)
KIOCORE_EXPORT CopyJob * link(const QList< QUrl > &src, const QUrl &destDir, JobFlags flags=DefaultFlags)
QString label(StandardShortcut id)
qsizetype length() const const
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Sat Dec 21 2024 16:56:52 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.