A page with a header and footer, that can be flipped among many other features.
- Since
- org.mauikit.controls 1.0
This control inherits from QQC2 Pane, to checkout its inherited properties refer to the Qt Docs.
This page has a predefined header and footer bars that by default are set to a MauiKit ToolBar. The header bar can be dynamically moved to the bottom area, under the footer, for better reachability on hand held devices like phones.
- See also
- ToolBar
Any other item can replace the header and/or footer. And the default toolbars can be populated easily via the aliases:
- See also
- headBar
-
footBar
Thje following code snippet is a quick example for setting a custom header:
{
id: _page
{
width: parent.width
height: 40
color: "pink"
}
}
A page with a header and footer, that can be flipped among many other features.
Item header
The main single header bar.
A Page with a header and footer - and then the header moved to the bottom under the footer
- Note
- The Page control supports the Controls attached properties for level, status and showCSD. By default a Page level is set to be Secondary, but if the Page has been set to display the Client Side Decoration buttons via
Controls.showCSD, then it will be set as Primary. This level property is then propagated to the deafult header bar.
Features
Among other features, the page can make use of a reference to a flickable element to allow to have "pull-back toolbar" behaviour, floating toolbars, etc.
Pull-Back Bars
Pull-back bars allow to expand the content area by pulling away the header or footer when content is being flicked/scrolled - which is useful on phone screens. To enable this behaviour you need to reference the Flickable element via the flickable property.
- See also
- flickable
Then set the header/footer positioning properties to ListView.PullBackHeader. This property is automatically set to the default header if a flickable element has been assigned, so you can disable it by setting the property to ListView.InlineHeader instead.
- See also
- footerPositioning
-
headerPositioning
Bars Layout
As mentioned before, the Page has a header and footer area- the header can be moved to the bottom via the alternate header property: altHeader. But you can also stack multiple bars vertically. So you can have two or more header/footer bars.
- See also
- altHeader
To attach more bars use the header and footer columns property.
- See also
- headerColumn
-
footerColumn
{
id: _page
Rectangle
{
width: parent.width
height: 40
color: "pink"
},
Rectangle
{
width: parent.width
height: 40
color: "yellow"
}
]
}
alias headerColumn
Quick way to add more children to the header bar.
The header/footer layout is handled by a Column control, which can be accessed via the aliases to tweak the spacing, for example.
- See also
- headerContainer
-
footerContainer
A Page with a default header bar and two rectangles stacked as part of the header column
Floating & AutoHide
The header and/or footer bars can be set to a floating position - which means they will flow over the page contents at the bottom and top. When this is enable a translucency effect will be applied to hint about the content being covered underneath.
- See also
- floatingFooter
-
floatingHeader
The bars can also be set to auto-hide, when the cursor moves out or shown again when the cursor enters the bar area.
- See also
- autoHideFooter
-
autoHideHeader
The time to trigger this actions can be tweaked using the delay properties.
- See also
- autoHideFooterDelay
-
autoHideHeaderDelay
And to finetune the target area which reacts to enter and exit events, use the margins property:
- See also
- autoHideFooterMargins
-
autoHideHeaderMargins
A Page with a floating header - and a translucent effect
Notes
This component is an alternative to the QQC2 Page control, where the header and footer can not be moved easily - and it adds a few more functionality.
The padding properties will affect the header and footer, so if instead you meant to add internal padding to the page contents, you can use the margins properties.
When used in a StackView or SwipeView, this Page emits two signals for the go forward/back actions, which can be consumed to pop or push pages.
- See also
- goBackTriggered
{
id: _page
{
text: "Alt Header"
checked: _page.altHeader
onToggled: _page.altHeader = checked
}
}
alias headBar
An alias to the default ToolBar as the header bar.
An ApplicationWindow filled with a Page and with the CSD controls enabled
You can find a more complete example at this link.
- Note
- This control supports the attached Controls.showCSD property to display the window control buttons when using CSD. This is only supported if used with the MauiKit ToolBar as the header bar - which is the default. If use with another header element, the window control buttons need to be added manually.
Definition at line 159 of file Page.qml.
