MauiKit Controls

FlexListItem.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.Controls
22import QtQuick.Layouts
23
24import org.mauikit.controls as Maui
25
26/**
27 * @inherit QtQuick.Controls.ItemDelegate
28 * @since org.mauikit.controls.labs 1.0
29 * @brief A template to position information next to a flexing right-content section, that wraps into a new line under constrained space conditions.
30 *
31 * <a href="https://doc.qt.io/qt-6/qml-qtquick-controls-itemdelegate.html">This control inherits from QQC2 ItemDelegate, to checkout its inherited properties refer to the Qt Docs.</a>
32 *
33 * @image html Misc/flexlistitem.png "Expanded vs wrapped"
34 *
35 * @code
36 * Column
37 * {
38 * anchors.centerIn: parent
39 * width: parent.width
40 *
41 * Maui.FlexListItem
42 * {
43 * id: _flexItem
44 * width: parent.width
45 * label1.text: "Flex List Item"
46 * label2.text: "This item is reposnive and will split into a column on a narrow space."
47 * iconSource: "love"
48 *
49 * Rectangle
50 * {
51 * color: "purple"
52 * radius: 4
53 * implicitHeight: 64
54 * implicitWidth: 140
55 * Layout.fillWidth: !_flexItem.wide
56 * Layout.minimumWidth: 140
57 * }
58 *
59 * Rectangle
60 * {
61 * color: "yellow"
62 * radius: 4
63 * implicitHeight: 64
64 * implicitWidth: 80
65 * Layout.fillWidth: !_flexItem.wide
66 * }
67 * }
68 * }
69 * @endcode
70 *
71 * @section notes Notes
72 * It is possible to manually set the number of columns to be used using the `columns` property, but this will break the auto wrapping functionality of the `wide` property. So consider using this property only if it is really needed to be forced.
73 *
74 * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/FlexLisItem.qml">You can find a more complete example at this link.</a>
75 */
76ItemDelegate
77{
78 id: control
79
80 /**
81 * @brief The items declared as the children of this element will wrap into a new line on constrained spaces.
82 * @note The content is handled by a RowLayout, so to position items use the Layout attached properties.
83 * @property list<QtObject> FlexListItem::content
84 */
85 default property alias content : _content.data
86
87 /**
88 * @brief An alias to the template element handling the information labels and image/icon.
89 * @see ListItemTemplate
90 * @property ListItemTemplate FlexListItem::template
91 */
92 property alias template: _template
93
94 /**
95 * @brief The Label element for the title.
96 * @property Label FlexListItem::label1
97 */
98 property alias label1 : _template.label1
99
100 /**
101 * @brief The Label element for the message body.
102 * @property Label FlexListItem::label2
103 */
104 property alias label2 : _template.label2
105
106 /**
107 * @brief The Label element for extra information positioned on the right top side..
108 * @property Label FlexListItem::label3
109 */
110 property alias label3 : _template.label3
111
112 /**
113 * @brief The Label element for extra information positioned on the right bottom side..
114 * @property Label FlexListItem::label4
115 */
116 property alias label4 : _template.label4
118 /**
119 * @brief The icon name to be used in the information section.
120 * @property string FlexListItem::iconSource
121 */
122 property alias iconSource : _template.iconSource
123
124 /**
125 * @brief The image source file to be used in the information section.
126 * @property url FlexListItem::imageSource
127 */
128 property alias imageSource : _template.imageSource
129
130 /**
131 * @brief The size hint for the icon container.
132 * @property int FlexListItem::iconSizeHint
133 */
134 property alias iconSizeHint : _template.iconSizeHint
135
136 /**
137 * @brief Whether the layout will be wrapped into a new line or not. If `wide: true` then a single line is used, but otherwise the layout is split into two lines, at the top the information labels and and the bottom all the children elements.
138 * @see content
139 */
140 property bool wide : _content.implicitWidth < _layout.width*0.5
141
142 /**
143 * @brief The spacing of the rows, when the layout is wrapped.
144 * @property int FlexListItem::rowSpacing
145 */
146 property alias rowSpacing : _layout.rowSpacing
147
148 /**
149 * @brief The spacing of the columns, when the layout is not wrapped.
150 * @property int FlexListItem::columnSpacing
151 */
152 property alias columnSpacing: _layout.columnSpacing
153
154 /**
155 * @brief This allows to manually set the number of columns to be used.
156 * By default his value is set to 2 when it is wide, and to 1 otherwise.
157 * @warning Using this property will break the wrapping functionality via the `wide` property.
158 */
159 property alias columns: _layout.columns
160
161 /**
162 * @brief This allows to manually set the number of rows to be used. By default this uses maximum two [2] rows.
163 * @warning Using this property will break the wrapping functionality via the `wide` property.
164 */
165 property alias rows: _layout.rows
166
167 implicitHeight: _layout.implicitHeight + topPadding + bottomPadding
168 // implicitWidth: _layout.implicitWidth + topPadding + bottomPadding
169
170 background: null
171
172 spacing: Maui.Style.defaultSpacing
173
174 contentItem: GridLayout
175 {
176 id: _layout
177
178 rowSpacing: control.spacing
179 columnSpacing: control.spacing
180
181 columns: control.wide ? 2 : 1
182
183 Maui.ListItemTemplate
184 {
185 id: _template
186 Layout.fillWidth: true
187 iconSizeHint: Maui.Style.iconSizes.medium
188 label2.wrapMode: Text.WordWrap
189 label1.font.weight: Font.Medium
190 }
191
192 RowLayout
193 {
194 id: _content
195 Layout.fillWidth: !control.wide
196 }
197 }
198}
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Nov 8 2024 11:48:43 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.