src/controls.6/SectionGroup.qml

0001 import QtQuick
0002
0003 import QtQuick.Layouts
0004 import QtQuick.Controls
0005
0006 import org.mauikit.controls 1.3 as Maui
0007
0008 /**
0009  * @inherit QtQuick.Controls.Pane
0010  *  @since org.mauikit.controls
0011  *  @brief A control to group children elements into a column layout with a header section with a title and message body.
0012  *
0013  * <a href="https://doc.qt.io/qt-6/qml-qtquick-controls-pane.html">This controls inherits from QQC2 Pane, to checkout its inherited properties refer to the Qt Docs.</a>
0014  *
0015  * @image html Misc/sectiongroup.png "Example of different usages of the control"
0016  *
0017  * @code
0018  * Maui.SectionGroup
0019  * {
0020  *     title: "Section with Children"
0021  *     description: "The description label can be a bit longer explaining something importand. Maybe?"
0022  *
0023  *     Rectangle
0024  *     {
0025  *        Layout.fillWidth: true
0026  *        implicitHeight: 60
0027  *        radius: 20
0028  *
0029  *        color: "orange"
0030  *     }
0031  * }
0032  * @endcode
0033  *
0034  * @note Consider using the SectionItem or FlexSectionItem as the children elements of this control, in order to have a more cohesive look with another MauiKit applications.
0035  *
0036  * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/SectionGroup.qml">You can find a more complete example at this link.</a>
0037  */
0038 Pane
0039 {
0040      id: control
0041
0042      /**
0043       * @brief By default the content children will be placed on a ColumnLayout, so use the Layout attached properties for positioning them.
0044       * @note The children elements should have an implicit height.
0045       * @property list<QtObject>
0046       */
0047      default property alias content : _layout.data
0048
0049           /**
0050            * @brief The title of the section header.
0051            * @property string SectionGroup::title
0052            */
0053           property alias title : _template.text1
0054
0055           /**
0056            * @brief The message body of the section header.
0057            * @property string SectionGroup::description
0058            */
0059           property alias description : _template.text2
0060
0061           /**
0062            * @brief An alias to the section header title control, which is handled by SectionHeader
0063            * More properties can be accessed via this alias, such as setting a custom icon or image, etc, for that use the `template` of the `template`.
0064            * @code
0065            * Maui.SectionGroup
0066            * {
0067            *   title: "Hello"
0068            *   description: "Description text"
0069            *   template.template.iconSource: "folder" //Here we access the template of this control, which is a SectionHeader, and then the template fo the section header, which is a ListItemTemplate.
0070            * }
0071            * @endcode
0072            * @see SectionHeader
0073            * @see ListItemTemplate
0074            * @property SectionHeader SectionGroup::template
0075            */
0076           readonly property alias template: _template
0077
0078           spacing: Maui.Style.defaultSpacing
0079
0080           Layout.fillWidth: true
0081           padding: Maui.Style.contentMargins
0082
0083           implicitHeight: implicitContentHeight + topPadding + bottomPadding
0084
0085           background: null
0086
0087           contentItem: ColumnLayout
0088           {
0089                id: _layout
0090                spacing: control.spacing
0091
0092                Maui.SectionHeader
0093                {
0094                     id: _template
0095                     Layout.fillWidth: true
0096                     label1.font: Maui.Style.defaultFont
0097                     label1.text: control.title
0098                     label2.text: control.description
0099                     label1.opacity: 0.7
0100                     label2.opacity: 0.7
0101                     template.iconSizeHint: Maui.Style.iconSizes.medium
0102                }
0103           }
0104 }