MauiKit Controls

PageLayout.qml
1/*
2 * Copyright 2019 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 QtQml
22import QtQuick.Controls
23import QtQuick.Layouts
24
25import org.mauikit.controls as Maui
26
27/**
28 * @inherit Page
29 * @brief A MauiKit Page with a toolbar bar content that is dynamically split onto two bars upon request.
30 * This control inherits from MauiKit Page, to checkout its inherited properties refer to docs.
31 *
32 * The default header for the Page is set to MauiKit ToolBar, which is divided into three main sections; the left and right side section are the one that can be wrapped into another tool bar when requested - for example, due to space constrains.
33 * To know more see the ToolBar documentation.
34 * @see ToolBar
35 * @see Page
36 *
37 * For it to work just populate the left and right side sections. And then set a constrain check on the `split` property.
38 * When it is set to `split: true`, the left and right side contents will be moved to a new tool bar under the main header.
39 * @see leftContent
40 * @see middleContent
41 * @see rightContent
42 *
43 * @image html Misc/pagelayout.png
44 *
45 * @warning It is important to not change the `header` to a different control. PageLayout depends on MauiKit ToolBar being used.
46 *
47 * If it is desired to keep any controls from moving out of the main header, use the `farLeftContent` and/or `farRightContent` properties for placing such items, that will insure those items will stay always in place.
48 *
49 * @code
50 * Maui.PageLayout
51 * {
52 * id: _page
53 *
54 * anchors.fill: parent
55 * Maui.Controls.showCSD: true
56 *
57 * split: width < 600
58 * leftContent: [Switch
59 * {
60 * text: "Hello"
61 * },
62 *
63 * Button
64 * {
65 * text: "Button"
66 * }
67 * ]
68 *
69 * rightContent: Rectangle
70 * {
71 * height: 40
72 * implicitWidth: 60
73 * color: "gray"
74 * }
75 *
76 * middleContent: Rectangle
77 * {
78 * implicitHeight: 40
79 * implicitWidth: 60
80 * Layout.alignment: Qt.AlignHCenter
81 * Layout.fillWidth: _page.split
82 * color: "yellow"
83 * }
84 * }
85 * @endcode
86 *
87 * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/PageLayout.qml">You can find a more complete example at this link.</a>
88 */
89Maui.Page
90{
91 id: control
93 /**
94 * @brief The toolbar left side content.
95 * This content will be wrapped into a secondary tool bar under the header.
96 */
97 property list<QtObject> leftContent
98
99 /**
100 * @brief The toolbar bar right side content.
101 * This content will be wrapped into a secondary tool bar under the header.
102 */
103 property list<QtObject> rightContent
104
105 /**
106 * @brief The toolbar middle content.
107 * This elements will not be wrapped and will stay in place.
108 * @note The contents are placed using a RowLayout, so use the layout attached properties accordingly.
109 */
110 property list<QtObject> middleContent : control.headBar.middleContent
111
112 /**
113 * @brief Whether the toolbar content should be wrapped - as in split - into a new secondary toolbar.
114 * By default this is set to `false`.
115 * @note You can bind this to some space constrain condition.
116 */
117 property bool split : false
118
119 /**
120 * @brief Where the left and right content will be moved, either to the header or the footer. The available options are `ToolBar.Header` or `ToolBar.Footer`
121 * By default it is se to `ToolBar.Header`
122 */
123 property int splitIn : ToolBar.Header
124
125 headBar.forceCenterMiddleContent: !control.split
126 headBar.leftContent: !control.split && control.leftContent ? control.leftContent : null
127 headBar.rightContent: !control.split && control.rightContent ? control.rightContent : null
128
129 headBar.middleContent: control.middleContent ? control.middleContent : null
130
131 headerColumn: Loader
132 {
133 active: control.splitIn === ToolBar.Header
134 visible: control.split && control.splitIn === ToolBar.Header
135 width: parent.width
136
137 sourceComponent: Maui.ToolBar
138 {
139 id: _headBar
140 Maui.Controls.level: control.Maui.Controls.level ? control.Maui.Controls.level : Maui.Controls.Secondary
141 leftContent: control.split && control.leftContent ? control.leftContent : null
142 rightContent: control.split && control.rightContent ? control.rightContent : null
143
144 Maui.Controls.item: ShaderEffectSource
145 {
146 sourceItem: control.pageContent
147 sourceRect: _headBar.background ?
148 (control.floatingHeader ?
149 Qt.rect(0, (_headBar.position === ToolBar.Header ? control.headBar.background.height : control.pageContent.height - _headBar.background.height), _headBar.background.width, _headBar.background.height)
150 : Qt.rect(0, (_headBar.position === ToolBar.Header ? 0 - (_headBar.background.height) : control.pageContent.height), _headBar.background.width, _headBar.background.height))
151 : null
152 }
153 }
154 }
155
156 footerColumn: Loader
157 {
158 active: control.splitIn === ToolBar.Footer
159 visible: control.split && control.splitIn === ToolBar.Footer
160 width: parent.width
161
162 sourceComponent: Maui.ToolBar
163 {
164 leftContent: control.split && control.leftContent ? control.leftContent : null
165 rightContent: control.split && control.rightContent ? control.rightContent : null
166 }
167 }
168}
An alternative to QQC2 ToolBar, with a custom horizontal layout - divided into three main sections - ...
Definition ToolBar.qml:115
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Nov 1 2024 18:54:05 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.