MauiKit Controls

GridItemTemplate.qml
1/*
2 * Copyright 2018 Camilo Higuita <milo.h@aol.com>
3 *
4 * This program is free software; you can redistribute it and/or modify
5 * it under the terms of the GNU Library General Public License as
6 * published by the Free Software Foundation; either version 2, or
7 * (at your option) any later version.
8 *
9 * This program is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details
13 *
14 * You should have received a copy of the GNU Library General Public
15 * License along with this program; if not, write to the
16 * Free Software Foundation, Inc.,
17 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
18 */
19
20import QtQuick
21import QtQuick.Layouts
22import QtQuick.Controls
23
24import org.mauikit.controls as Maui
25
26/**
27 * @inherit QtQuick.Item
28 * @brief A template with a icon or image and a two bottom labels.
29 *
30 * <a href="https://doc.qt.io/qt-6/qml-qtquick-controls-item.html">This controls inherits from QQC2 Item, to checkout its inherited properties refer to the Qt Docs.</a>
31 *
32 * The structure of this control is divided into a top header for the image/icon and a two labels for the title and message, at the bottom.
33 * The top section can be modified and assigned to any custom control.
34 * @see iconComponent
35 *
36 * For extra information checkout the GridBrowserDelegate documentation, since this template elementis used as its base.
37 */
38Item
39{
40 id: control
41 focus: true
42 smooth: !Maui.Handy.isMobile
43
44 implicitHeight: _layout.implicitHeight
45 implicitWidth: _layout.implicitWidth
46
47 /**
48 * @brief The spacing size between the image/icon header and the label title and message.
49 * @property int GridItemTemplate::spacing
50 */
51 property alias spacing: _layout.spacing
53 /**
54 * @brief By default all children will be positioned at the bottom end of the column.
55 * The positioning of the elements is handled by a ColumnLayout, so use the attached properties accordingly.
56 * @property list<QtObject> GridItemTemplate::content
57 */
58 default property alias content: _layout.data
59
60 /**
61 * @brief The text use for the title text.
62 * @property string GridItemTemplate::text1
63 */
64 property alias text1 : _label1.text
65
66 /**
67 * @brief The text use for the message text.
68 * @property string GridItemTemplate::text2
69 */
70 property alias text2 : _label2.text
71
72 /**
73 * @brief An alias for the QQC2 Label handling the title text. Exposed for fine tuning the label font properties.
74 * @note See the QQC2 Label documentation for more information.
75 * @property Label GridItemTemplate::label1
76 */
77 readonly property alias label1 : _label1
78
79 /**
80 * @brief An alias for the QQC2 Label handling the message text. Exposed for fine tuning the label font properties.
81 * @note See the QQC2 Label documentation for more information.
82 * @property Label GridItemTemplate::label2
83 */
84 readonly property alias label2 : _label2
86 /**
87 * @brief The Item loaded as the icon header section.
88 * The component used as the icon header is loaded with a QQC2 Loader - this property exposes that element that was loaded.
89 * By default the loaded item will be a MauiKit IconItem, but if another component is used for `iconComponent`, that will be the resulting Item.
90 * @see structure
91 * @property Item GridItemTemplate::iconItem
92 */
93 readonly property alias iconItem : _iconLoader.item
94
95 /**
96 * @brief The container for the icon header section. This is handled by a QQC2 Loader.
97 * By default the source component will be loaded asynchronous.
98 * @property Loader GridItemTemplate::iconContainer
99 */
100 readonly property alias iconContainer : _iconLoader
101
102 /**
103 * @brief Whether the icon/image header section should be visible.
104 * @property bool GridItemTemplate::iconVisible
105 */
106 property alias iconVisible : _iconLoader.visible
107
108 /**
109 * @brief A size hint for the bottom labels. The final size will depend on the available space.
110 * @property int GridItemTemplate::iconSizeHint
111 */
112 property alias labelSizeHint : _labelsContainer.labelSizeHint
113
114 /**
115 * @brief A size hint for the icon to be used in the header. The final size will depend on the available space.
116 */
117 property int iconSizeHint : Maui.Style.iconSizes.big
118
119 /**
120 * @brief A size hint for the image to be used in the header. The final size will depend on the available space.
121 * By default this is set to `-1` which means that the image header will take the rest of the available space.
122 */
123 property int imageSizeHint : -1
125 /**
126 * @see IconItem::imageSource
127 */
128 property string imageSource
130 /**
131 * @see IconItem::iconSource
132 */
133 property string iconSource
134
135 /**
136 * @brief Whether this element is currently on a selected or checked state. This is used to highlight the component accordingly.
137 * By default this is set to `false`.
138 */
139 property bool isCurrentItem: false
140
141 /**
142 * @brief Whether the two bottom labels, for title and message, should be displayed.
143 * By default this is set to `true`.
144 */
145 property bool labelsVisible: true
146
147 /**
148 * @see IconItem::fillMode
149 * By default this is set to `Image.PreserveAspectCrop`.
150 * @note For more options and information review the QQC2 Image documentation.
151 */
152 property int fillMode : Image.PreserveAspectCrop
153
154 /**
155 * @see IconItem::maskRadius
156 */
157 property int maskRadius: 0
158
159 /**
160 * @see IconItem::imageWidth
161 */
162 property int imageWidth : -1
164 /**
165 * @see IconItem::imageHeight
166 */
167 property int imageHeight: -1
169 /**
170 * @see IconItem::isMask
171 * By default this is set to evaluate `true` for icons equal or smaller in size then 16 pixels.
172 */
173 property bool isMask : iconSizeHint <= Maui.Style.iconSizes.small
174
175 /**
176 * @brief Whether the control should be styled as being hovered by a cursor.
177 * By default his is set to `false`.
178 */
179 property bool hovered: false
180
181 /**
182 * @brief Whether the image should be auto transformed, that means auto rotated.
183 * @note See the QQC2 Image documentation for further information on this property.
184 * By default this is set to `false`.
185 */
186 property bool autoTransform: false
187
188 /**
189 * @brief Whether the control should be styled as being highlighted by some external event.
190 * By default this is set to `false`.
191 */
192 property bool highlighted: false
193
194 /**
195 * @brief The horizontal alignment of the control elements. If the text in the labels should be aligned to the left, right or be centered. This can also affect the icon.
196 * By default this is set to `Qt.AlignHCenter`.
197 * Possible values are:
198 * - Qt.AlignLeft
199 * - Qt.AlignRight
200 * - Qt.AlignHCenter
201 */
202 property int alignment: Qt.AlignHCenter
203
204 /**
205 * @brief The header section can be modified by changing its component to a custom one. By default the component used for the `iconComponent` is a MauiKit IconItem element.
206 * @note When using a custom component for the header section, pay attention that it has an `implicitHeight` and `implicitWidth` set.
207 */
208 property Component iconComponent : _iconComponent
209
210 Component
211 {
212 id: _iconComponent
213
214 Maui.IconItem
215 {
216 iconSource: control.iconSource
217 imageSource: control.imageSource
218
219 highlighted: control.isCurrentItem || control.highlighted
220 hovered: control.hovered
221 smooth: control.smooth
222 iconSizeHint: control.iconSizeHint
223 imageSizeHint: control.imageSizeHint
224
225 fillMode: control.fillMode
226 maskRadius: control.maskRadius
227
228 imageWidth: control.imageWidth
229 imageHeight: control.imageHeight
230
231 isMask: control.isMask
232 image.autoTransform: control.autoTransform
233
234 alignment: control.alignment
235 }
236 }
237
238 ColumnLayout
239 {
240 id: _layout
241 anchors.fill: parent
242 spacing: Maui.Style.space.medium
243
244 Loader
245 {
246 id: _iconLoader
247
248 Layout.fillWidth: true
249 Layout.fillHeight: true
250
251 asynchronous: true
252 active: visible
253 sourceComponent: control.iconComponent
254
255 // OpacityAnimator on opacity
256 // {
257 // from: 0
258 // to: 1
259 // duration: Maui.Style.units.longDuration
260 // running: _iconLoader.status === Loader.Ready
261 // }
262 }
263
264 Item
265 {
266 id: _labelsContainer
267 property int labelSizeHint: Math.min(64, _labels.implicitHeight)
268 visible: control.labelsVisible && ( _label1.text || _label2.text)
269
270 Layout.preferredHeight: visible ? labelSizeHint : -_layout.spacing
271 Layout.fillWidth: true
272 Layout.maximumHeight: control.height* 0.9
273 Layout.minimumHeight: labelSizeHint
274
275 ColumnLayout
276 {
277 id: _labels
278 anchors.fill: parent
279 spacing: Maui.Style.space.tiny
280
281 Label
282 {
283 id: _label1
284 visible: text && text.length
285
286 horizontalAlignment: control.alignment
287 verticalAlignment: Qt.AlignVCenter
288
289 Layout.fillWidth: true
290 Layout.fillHeight: true
291 Layout.alignment: Qt.AlignCenter
292
293 elide: Qt.ElideRight
294 wrapMode: Text.Wrap
295 color: control.isCurrentItem || control.highlighted? control.Maui.Theme.highlightedTextColor : control.Maui.Theme.textColor
296 }
297
298 Label
299 {
300 id: _label2
301 visible: text.length
302
303 horizontalAlignment: control.alignment
304 verticalAlignment: Qt.AlignVCenter
305
306 Layout.fillWidth: visible
307 Layout.fillHeight: true
308 Layout.alignment: Qt.AlignCenter
309
310 elide: Qt.ElideRight
311 wrapMode: Text.NoWrap
312 color: control.isCurrentItem || control.highlighted? control.Maui.Theme.highlightedTextColor : control.Maui.Theme.textColor
313 opacity: control.isCurrentItem ? 0.8 : 0.6
314 }
315 }
316 }
317 }
318}
This file is part of the KDE documentation.
Documentation copyright © 1996-2025 The KDE developers.
Generated on Fri May 2 2025 11:57:11 by doxygen 1.13.2 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.