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 }