Warning, /maui/mauikit/src/controls.6/FlexListItem.qml is written in an unsupported language. File is not indexed.
0001 /*
0002 * Copyright 2018 Camilo Higuita <milo.h@aol.com>
0003 *
0004 * This program is free software; you can redistribute it and/or modify
0005 * it under the terms of the GNU Library General Public License as
0006 * published by the Free Software Foundation; either version 2, or
0007 * (at your option) any later version.
0008 *
0009 * This program is distributed in the hope that it will be useful,
0010 * but WITHOUT ANY WARRANTY; without even the implied warranty of
0011 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
0012 * GNU General Public License for more details
0013 *
0014 * You should have received a copy of the GNU Library General Public
0015 * License along with this program; if not, write to the
0016 * Free Software Foundation, Inc.,
0017 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
0018 */
0019
0020 import QtQuick
0021 import QtQuick.Controls
0022 import QtQuick.Layouts
0023
0024 import org.mauikit.controls 1.3 as Maui
0025
0026 /**
0027 * @inherit QtQuick.Controls.ItemDelegate
0028 * @since org.mauikit.controls.labs 1.0
0029 * @brief A template to position information next to a flexing right-content section, that wraps into a new line under constrained space conditions.
0030 *
0031 * <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>
0032 *
0033 * @image html Misc/flexlistitem.png "Expanded vs wrapped"
0034 *
0035 * @code
0036 * Column
0037 * {
0038 * anchors.centerIn: parent
0039 * width: parent.width
0040 *
0041 * Maui.FlexListItem
0042 * {
0043 * id: _flexItem
0044 * width: parent.width
0045 * label1.text: "Flex List Item"
0046 * label2.text: "This item is reposnive and will split into a column on a narrow space."
0047 * iconSource: "love"
0048 *
0049 * Rectangle
0050 * {
0051 * color: "purple"
0052 * radius: 4
0053 * implicitHeight: 64
0054 * implicitWidth: 140
0055 * Layout.fillWidth: !_flexItem.wide
0056 * Layout.minimumWidth: 140
0057 * }
0058 *
0059 * Rectangle
0060 * {
0061 * color: "yellow"
0062 * radius: 4
0063 * implicitHeight: 64
0064 * implicitWidth: 80
0065 * Layout.fillWidth: !_flexItem.wide
0066 * }
0067 * }
0068 * }
0069 * @endcode
0070 *
0071 * @section notes Notes
0072 * 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.
0073 *
0074 * <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>
0075 */
0076 ItemDelegate
0077 {
0078 id: control
0079
0080 /**
0081 * @brief The items declared as the children of this element will wrap into a new line on constrained spaces.
0082 * @note The content is handled by a RowLayout, so to position items use the Layout attached properties.
0083 * @property list<QtObject> FlexListItem::content
0084 */
0085 default property alias content : _content.data
0086
0087 /**
0088 * @brief An alias to the template element handling the information labels and image/icon.
0089 * @see ListItemTemplate
0090 * @property ListItemTemplate FlexListItem::template
0091 */
0092 property alias template: _template
0093
0094 /**
0095 * @brief The Label element for the title.
0096 * @property Label FlexListItem::label1
0097 */
0098 property alias label1 : _template.label1
0099
0100 /**
0101 * @brief The Label element for the message body.
0102 * @property Label FlexListItem::label2
0103 */
0104 property alias label2 : _template.label2
0105
0106 /**
0107 * @brief The Label element for extra information positioned on the right top side..
0108 * @property Label FlexListItem::label3
0109 */
0110 property alias label3 : _template.label3
0111
0112 /**
0113 * @brief The Label element for extra information positioned on the right bottom side..
0114 * @property Label FlexListItem::label4
0115 */
0116 property alias label4 : _template.label4
0117
0118 /**
0119 * @brief The icon name to be used in the information section.
0120 * @property string FlexListItem::iconSource
0121 */
0122 property alias iconSource : _template.iconSource
0123
0124 /**
0125 * @brief The image source file to be used in the information section.
0126 * @property url FlexListItem::imageSource
0127 */
0128 property alias imageSource : _template.imageSource
0129
0130 /**
0131 * @brief The size hint for the icon container.
0132 * @property int FlexListItem::iconSizeHint
0133 */
0134 property alias iconSizeHint : _template.iconSizeHint
0135
0136 /**
0137 * @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.
0138 * @see content
0139 */
0140 property bool wide : _content.implicitWidth < _layout.width*0.5
0141
0142 /**
0143 * @brief The spacing of the rows, when the layout is wrapped.
0144 * @property int FlexListItem::rowSpacing
0145 */
0146 property alias rowSpacing : _layout.rowSpacing
0147
0148 /**
0149 * @brief The spacing of the columns, when the layout is not wrapped.
0150 * @property int FlexListItem::columnSpacing
0151 */
0152 property alias columnSpacing: _layout.columnSpacing
0153
0154 /**
0155 * @brief This allows to manually set the number of columns to be used.
0156 * By default his value is set to 2 when it is wide, and to 1 otherwise.
0157 * @warning Using this property will break the wrapping functionality via the `wide` property.
0158 */
0159 property alias columns: _layout.columns
0160
0161 /**
0162 * @brief This allows to manually set the number of rows to be used. By default this uses maximum two [2] rows.
0163 * @warning Using this property will break the wrapping functionality via the `wide` property.
0164 */
0165 property alias rows: _layout.rows
0166
0167 implicitHeight: _layout.implicitHeight + topPadding + bottomPadding
0168 // implicitWidth: _layout.implicitWidth + topPadding + bottomPadding
0169
0170 background: null
0171
0172 spacing: Maui.Style.defaultSpacing
0173
0174 contentItem: GridLayout
0175 {
0176 id: _layout
0177
0178 rowSpacing: control.spacing
0179 columnSpacing: control.spacing
0180
0181 columns: control.wide ? 2 : 1
0182
0183 Maui.ListItemTemplate
0184 {
0185 id: _template
0186 Layout.fillWidth: true
0187 iconSizeHint: Maui.Style.iconSizes.medium
0188 label2.wrapMode: Text.WordWrap
0189 label1.font.weight: Font.Medium
0190 }
0191
0192 RowLayout
0193 {
0194 id: _content
0195 Layout.fillWidth: !control.wide
0196 }
0197 }
0198 }