MauiKit — Page and ToolBar
To continue the previous post about how to use the Maui Kit controls, where I first introduced the ApplicationWindow part with its properties and components, on this new post I will write about the current state of the Page and ToolBar controls that make part of the Maui Kit and have been optimized for convergence and are in continue development.
Page
A page is an essential component inside the Maui Kit. A page allows you to layout the content following the Maui HIG and take advantaged of the templated controls inside of it that make it easier to adapt the UI from desktop to mobile devices.
The Page control contains the same implementation as the ApplicationWindow, since the ApplicationWindow uses the Page control as its base component.
That means that you have a HeadBar, a Content area and a FootBar, and the toolbars can be moved and tweaked by making use the properties: altToolBars, floatingBar, footBarOverlap, etc…
import org.kde.maui 1.0 as Maui
Maui.Page {}
The following screenshots show Index, a file manager, making use of the Maui.Page control for the browser view with a floating FootBar that overlaps the content and when needed moves back to its own reserved space. This can be done by populating the footBar aliases, and setting to true the properties: floatingBar, footBarOverlap and allowRiseContent.
The following screenshots show VVAVE making use of the Maui.Page control on the right and left view of the Kirigami.PageRow. The property altToolBars is set to true for the right view and a floating FootBar is being used on the right playlist with the property footBarOverlap and floatingBar set to true.
Setting the altToolBars property to the isMobile read-only property is useful for reach-ability of the Page actions on mobile devices such as Phones, Phablets and Tablets.
Properties:
bool headBarVisible :
By default the HeadBar is visible and contains an exit button. This can be modified my setting this property to false or setting the headBarExit property to false and leaving the HeadBar empty.
bool footBarVisible :
By default the FootBar is not visible. This can be modified my setting this property to true or adding components to the FootBar
bool headBarExit :
By default the HeadBar contains an exit button on the left side, this can be modified by setting this property to false o changing the exit button icon with the property headBarExitIcon
bool headBarTitleVisible :
By default the middle content of the HeadBar is set to contain a title, this can be changed by setting this property to false.
string headBarExitIcon :
By default the HeadBar exit button has an icon named “dialog-close”, it can be changed to whatever other icon name that makes more sense.
string headBarTitle :
By default the HeadBar contains a title that is placed on the middle, the title can be set with this property.
int margins :
By default the margins for the Page main content are set to :
contentMargins * 1.5
This can be changed to better adjust to your application design.
int footBarAligment :
By default it is set to Qt.AlignCenter, but can be set to any other alignment value. Changes will be only visible if the floatingBar property is set to True.
bool altToolBars :
If set to True, the HeadBar will be moved to the bottom of the application window. By default this property is set to False
int footBarMargins :
This property adds margins to the FootBar when it is set as a floating bar using the floatinBar property. It is useful when the FootBar needs to stand out.
bool floatingBar :
If set to True, the FootBar will act as a floating bar, it will not occupy the full width of the application window, but instead use the minimum width required to place its children content. Also it will be coloured by making use of the global theming property accentColor and cast a shadow.
By default the floating bar does not overlaps the content, to make it overlap the content the footBarOverlap property will have to be set to True
By default this property is set to the altToolBars property.
bool footBarOverlap :
If set to True, and also only if the floatingBar property is set to True too, the FootBar will act as a floating bar overlapping the content of the window.
When this property is set to True, the content will flick when scrolled down to show a reserved space for the FootBar in order to not overlap important content positioned at the bottom.
By default this property is set to False
bool allowRiseContent :
If the properties floatingBar and footBarOverlap are set to True this property can be modified allowing the content to be elevated when it reaches the bottom or end. This allows to reveal a reserved space for the floating bar so the FootBar don’t cover important content when needed.
By default this property is set to: floatingBar && footBarOverlap
bool contentIsRaised :
Allows to know if the content flickable is raised up or not.
Aliases:
alias headBar :
This alias allows you to modified the HeadBar and add content to it. The HeadBar is based on Maui.ToolBar so it inherits all its properties, such as:
headBar.leftContent: []
headBar.middleContent: []
headBar.rightContent: []
headBar.background: {}
and all the others…
alias footBar :
This alias allows you to modified the FootBar and add content to it. The FootBar is based on Maui.ToolBar so it inherits all its properties, such as:
footBar.leftContent: []
footBar.middleContent: []
footBar.rightContent: []
footBar.background: {}
and all the others…
Signals:
signal exit :
This signal is emitted when the HeadBar exit button is clicked.
ToolBar
Maui Kit implements the ToolBar as a horizontal layout with three sections: a leftContent, middleContent and leftContent that can be populated with other controls such as buttons, labels and tool buttons.:
The ToolBar is a flickable, which means that if the size of its children content can not fit in the available width then the content will be flicked horizontally, allowing to discover the remaining actions, buttons, labels, etc… that couldn’t be fitted by scrolling horizontally.
The following screenshot shows Buho, a notes taking app, making use of the Maui.Page control that uses the Maui.ToolBar. On the HeadBar the three sections are visible:
leftContent: has a hamburger menu tool button
middleContent: has a list of tool buttons, fo notes, links, books and tags
and finally, the rightContent: has a search tool button
while the FootBar of the Maui.Page only has a middleContent that includes an add tool button, and the ToolBar has been aligned to the right side.
When the content of the ToolBar can not be fitted on its width then the content will be able to be flicked horizontally to revealed the remaining actions.
The following images demonstrate how this behaviour works when the width of the window is minimal. This is useful when there are several actions inside the tool bar and there’s not much width, like on small phones.
Properties:
int margins:
This property allows to set a margin space, by default it is set to the global property : space.medium
int count :
This property indicates the total number of child items inside the ToolBar
Aliases:
alias leftContent :
This alias allows to add content to the left side of the tool bar.
leftContent: Maui.ToolButton {id: btn1}
or
leftContent: [
Maui.ToolButton {id: btn1},
Maui.ToolButton {id: btn2},
Maui.ToolButton {id: btn3}
]
alias middleContent :
This alias allows to add content to the middle side of the tool bar.
alias rightContent :
This alias allows to add content to the right side of the tool bar.
