Warning, /maui/mauikit/src/controls.6/SectionItem.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
0029 * @brief An item used for holding information in a vertical column layout.
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 * Although it is similar to the SectionGroup (an information header with the children in a vertical layout) this control has some functionality differences, like being interactive and a different styling of the information labels. It is commonly use as the children elements of the SectionGroup.
0034 *
0035 * @note There is also the FlexSectionItem, which uses a dynamic layout for wrapping the content that does not fit.
0036 * @see FlexSectionItem
0037 *
0038 * @image html Misc/sectionitem.png "Three types of sections inside a SectionGroup"
0039 *
0040 * If the first and single child element of this control is `checkable`, then the state of such control will be toggled by clicking on the area of the SectionItem.
0041 *
0042 * @code
0043 * Maui.SectionGroup
0044 * {
0045 * title: "Section with Children"
0046 * description: "The description label can be a bit longer explaining something important. Maybe?"
0047 *
0048 * Maui.SectionItem
0049 * {
0050 * label1.text: "Checkable section item"
0051 * iconSource: "folder"
0052 *
0053 * Switch
0054 * {
0055 * onToggled: checked = !checked
0056 * }
0057 * }
0058 *
0059 * Maui.SectionItem
0060 * {
0061 * label1.text: "Single section item"
0062 * iconSource: "anchor"
0063 * }
0064 *
0065 * Maui.SectionItem
0066 * {
0067 * label1.text: "Hello this is a two line section item"
0068 * label2.text : "Subtitle text"
0069 *
0070 * TextArea
0071 * {
0072 * Layout.fillWidth: true
0073 * }
0074 * }
0075 * }
0076 * @endcode
0077 *
0078 * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/SectionItem.qml">You can find a more complete example at this link.</a>
0079 */
0080 ItemDelegate
0081 {
0082 id: control
0083
0084 padding: Maui.Style.defaultPadding
0085 spacing: Maui.Style.space.small
0086
0087 Layout.fillWidth: true
0088 implicitHeight: _layout.implicitHeight + topPadding + bottomPadding
0089
0090 /**
0091 * @brief The items declared as the children of this element will wrap into a new line on constrained spaces.
0092 * @note The content is handled by a RowLayout, so to position items use the Layout attached properties.
0093 * @property list<QtObject> FlexListItem::content
0094 */
0095 default property alias content : _layout.data
0096
0097 /**
0098 * @brief An alias to the template element handling the information labels and image/icon.
0099 * @see ListItemTemplate
0100 * @property ListItemTemplate FlexListItem::template
0101 */
0102 property alias template: _template
0103
0104 /**
0105 * @see ListItemTemplate::label1
0106 */
0107 property alias label1 : _template.label1
0108
0109 /**
0110 * @see ListItemTemplate::label2
0111 */
0112 property alias label2 : _template.label2
0113
0114 /**
0115 * @see ListItemTemplate::label3
0116 */
0117 property alias label3 : _template.label3
0118
0119 /**
0120 * @see ListItemTemplate::label4
0121 */
0122 property alias label4 : _template.label4
0123
0124 /**
0125 * @see ListItemTemplate::iconSource
0126 */
0127 property alias iconSource : _template.iconSource
0128
0129 /**
0130 * @see ListItemTemplate::imageSource
0131 */
0132 property alias imageSource : _template.imageSource
0133
0134 /**
0135 * @see ListItemTemplate::iconSizeHint
0136 */
0137 property alias iconSizeHint : _template.iconSizeHint
0138
0139 /**
0140 * @brief Whether the control should be styled as flat, as in not having a background or hover/pressed visual effect hints.
0141 * By default this is set to `!Handy.isMobile`
0142 * @see Handy::isMobile
0143 */
0144 property bool flat : !Maui.Handy.isMobile
0145
0146 /**
0147 * @brief Whether the first children element from the `content` is checkable.
0148 * If it is the the control will have a hover effect to hint about the item being checkable.
0149 */
0150 readonly property bool childCheckable : control.content.length >= 2 && control.content[1].hasOwnProperty("checkable") ? control.content[1].checkable : false
0151
0152 hoverEnabled: !Maui.Handy.isMobile
0153
0154 background: Rectangle
0155 {
0156 color: control.enabled ? ( control.childCheckable && control.hovered ? Maui.Theme.hoverColor : (control.flat ? "transparent" : Maui.Theme.alternateBackgroundColor)) : "transparent"
0157 radius: Maui.Style.radiusV
0158
0159 Behavior on color
0160 {
0161 enabled: !control.flat
0162 Maui.ColorTransition{}
0163 }
0164 }
0165
0166 contentItem: ColumnLayout
0167 {
0168 id: _layout
0169
0170 spacing: control.spacing
0171
0172 Maui.ListItemTemplate
0173 {
0174 id: _template
0175 Layout.fillWidth: true
0176 iconSizeHint: Maui.Style.iconSizes.medium
0177 label2.wrapMode: Text.WordWrap
0178 label1.font.weight: Font.Medium
0179 label1.text: control.text
0180 iconSource: control.icon.name
0181 }
0182 }
0183
0184 onClicked:
0185 {
0186 if(control.childCheckable)
0187 {
0188 console.log("Trying to toggle")
0189 control.content[1].toggled()
0190 }
0191 }
0192 }