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 1.3 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
46 /**
47 * @brief The spacing size between the image/icon header and the label title and message.
48 * @property int GridItemTemplate::spacing
49 */
50 property alias spacing: _layout.spacing
51
52 /**
53 * @brief By default all children will be positioned at the bottom end of the column.
54 * The positioning of the elements is handled by a ColumnLayout, so use the attached properties accordingly.
55 * @property list<QtObject> GridItemTemplate::content
56 */
57 default property alias content: _layout.data
58
59 /**
60 * @brief The text use for the title text.
61 * @property string GridItemTemplate::text1
62 */
63 property alias text1 : _label1.text
64
65 /**
66 * @brief The text use for the message text.
67 * @property string GridItemTemplate::text2
68 */
69 property alias text2 : _label2.text
70
71 /**
72 * @brief An alias for the QQC2 Label handling the title text. Exposed for fine tuning the label font properties.
73 * @note See the QQC2 Label documentation for more information.
74 * @property Label GridItemTemplate::label1
75 */
76 readonly property alias label1 : _label1
77
78 /**
79 * @brief An alias for the QQC2 Label handling the message text. Exposed for fine tuning the label font properties.
80 * @note See the QQC2 Label documentation for more information.
81 * @property Label GridItemTemplate::label2
82 */
83 readonly property alias label2 : _label2
84
85 /**
86 * @brief The Item loaded as the icon header section.
87 * The component used as the icon header is loaded with a QQC2 Loader - this property exposes that element that was loaded.
88 * By default the loaded item will be a MauiKit IconItem, but if another component is used for `iconComponent`, that will be the resulting Item.
89 * @see structure
90 * @property Item GridItemTemplate::iconItem
91 */
92 readonly property alias iconItem : _iconLoader.item
93
94 /**
95 * @brief The container for the icon header section. This is handled by a QQC2 Loader.
96 * By default the source component will be loaded asynchronous.
97 * @property Loader GridItemTemplate::iconContainer
98 */
99 readonly property alias iconContainer : _iconLoader
100
101 /**
102 * @brief Whether the icon/image header section should be visible.
103 * @property bool GridItemTemplate::iconVisible
104 */
105 property alias iconVisible : _iconLoader.visible
106
107 /**
108 * @brief A size hint for the bottom labels. The final size will depend on the available space.
109 * @property int GridItemTemplate::iconSizeHint
110 */
111 property alias labelSizeHint : _labelsContainer.labelSizeHint
112
113 /**
114 * @brief A size hint for the icon to be used in the header. The final size will depend on the available space.
115 */
116 property int iconSizeHint : Maui.Style.iconSizes.big
117
118 /**
119 * @brief A size hint for the image to be used in the header. The final size will depend on the available space.
120 * By default this is set to `-1` which means that the image header will take the rest of the available space.
121 */
122 property int imageSizeHint : -1
123
124 /**
125 * @see IconItem::imageSource
126 */
127 property string imageSource
128
129 /**
130 * @see IconItem::iconSource
131 */
132 property string iconSource
133
134 /**
135 * @brief Whether this element is currently on a selected or checked state. This is used to highlight the component accordingly.
136 * By default this is set to `false`.
137 */
138 property bool isCurrentItem: false
139
140 /**
141 * @brief Whether the two bottom labels, for title and message, should be displayed.
142 * By default this is set to `true`.
143 */
144 property bool labelsVisible: true
145
146 /**
147 * @see IconItem::fillMode
148 * By default this is set to `Image.PreserveAspectCrop`.
149 * @note For more options and information review the QQC2 Image documentation.
150 */
151 property int fillMode : Image.PreserveAspectCrop
152
153 /**
154 * @see IconItem::maskRadius
155 */
156 property int maskRadius: 0
157
158 /**
159 * @see IconItem::imageWidth
160 */
161 property int imageWidth : -1
162
163 /**
164 * @see IconItem::imageHeight
165 */
166 property int imageHeight: -1
167
168 /**
169 * @see IconItem::isMask
170 * By default this is set to evaluate `true` for icons equal or smaller in size then 16 pixels.
171 */
172 property bool isMask : iconSizeHint <= Maui.Style.iconSizes.small
173
174 /**
175 * @brief Whether the control should be styled as being hovered by a cursor.
176 * By default his is set to `false`.
177 */
178 property bool hovered: false
179
180 /**
181 * @brief Whether the image should be auto transformed, that means auto rotated.
182 * @note See the QQC2 Image documentation for further information on this property.
183 * By default this is set to `false`.
184 */
185 property bool autoTransform: false
186
187 /**
188 * @brief Whether the control should be styled as being highlighted by some external event.
189 * By default this is set to `false`.
190 */
191 property bool highlighted: false
192
193 /**
194 * @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.
195 * By default this is set to `Qt.AlignHCenter`.
196 * Possible values are:
197 * - Qt.AlignLeft
198 * - Qt.AlignRight
199 * - Qt.AlignHCenter
200 */
201 property int alignment: Qt.AlignHCenter
202
203 /**
204 * @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.
205 * @note When using a custom component for the header section, pay attention that it has an `implicitHeight` and `implicitWidth` set.
206 */
207 property Component iconComponent : _iconComponent
208
209 Component
210 {
211 id: _iconComponent
212
213 Maui.IconItem
214 {
215 iconSource: control.iconSource
216 imageSource: control.imageSource
217
218 highlighted: control.isCurrentItem || control.highlighted
219 hovered: control.hovered
220 smooth: control.smooth
221 iconSizeHint: control.iconSizeHint
222 imageSizeHint: control.imageSizeHint
223
224 fillMode: control.fillMode
225 maskRadius: control.maskRadius
226
227 imageWidth: control.imageWidth
228 imageHeight: control.imageHeight
229
230 isMask: control.isMask
231 image.autoTransform: control.autoTransform
232
233 alignment: control.alignment
234 }
235 }
236
237 ColumnLayout
238 {
239 id: _layout
240 anchors.fill: parent
241 spacing: Maui.Style.space.medium
242
243 Loader
244 {
245 id: _iconLoader
246
247 Layout.fillWidth: true
248 Layout.fillHeight: true
249
250 asynchronous: true
251 active: visible
252 sourceComponent: control.iconComponent
253
254 Behavior on scale
255 {
256 NumberAnimation
257 {
258 duration: Maui.Style.units.longDuration
259 easing.type: Easing.OutBack
260 }
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: labelSizeHint
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-2024 The KDE developers.
Generated on Fri May 17 2024 11:56:16 by doxygen 1.10.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.