SideBarView Class Reference

Properties
alias	content
alias	sideBar
alias	sideBarContent

Detailed Description

A view with a collapsible sidebar.

This controls inherits from QQC2 Item, to checkout its inherited properties refer to the Qt Docs.

The SideBarView is a convenient way for organizing the application contents into view alongside with a side-bar, which can be resized, collased, hidden and tweaked further. This control adapts to small screen spaces.

Sections

The SideBarView is divided into two sections, the sidebar container and the main contents area.

SideBar

The sidebar area can contain any number children items, and its positioning must be handled manually, either by anchoring or using the size and coordinates properties - anchoring to fill its parent is the best way to go, since the sidebar container can changed its size and positioning.

Once a child item has been set, other properties can be visited, such as setting the sidebar preferred and minimum width, or deciding if the sidebar will be resize-able or not. Those properties can be accessed via the alias property of the sidebar.

See also

sideBar

The sidebar can be hidden at the application startup, to tweak this behaviour the auto hide properties can be set accordingly. The sidebar can also be collapsed, and this behavior can be fine-tuned, by either deciding if when collapsing the sidebar should stay visible or not.

Tweaking the look of the sidebar can also be achieved by changing its background and padding properties. Those all properties are accessible via the alias property sideBar - and a few more methods for closing or opening the sidebar.

See also

SideBar

The sidebar is collapsed and expanded, shifting the main area content

Content

The position of the main content of the SideBarView has to be done by the child item. The default behaviour of the main content is be to shifted/moved when the sidebar being collapsed is expanded.

Maui.SideBarView
{
   id: _sideBar
   anchors.fill: parent
 
   sideBarContent: Maui.Page
   {
       Maui.Theme.colorSet: Maui.Theme.Window
       anchors.fill: parent
 
       headBar.leftContent: Maui.ToolButtonMenu
       {
           icon.name: "application-menu"
           MenuItem
           {
               text: "About"
               icon.name: "info-dialog"
               onTriggered: root.about()
           }
       }
 
       Maui.Holder
       {
           anchors.fill: parent
           title: "SideBar"
           body: "Collapsable."
           emoji: "folder"
       }
   }
 
   Maui.Page
   {
       anchors.fill: parent
       Maui.Controls.showCSD: true
 
       headBar.leftContent: ToolButton
       {
           icon.name: _sideBar.sideBar.visible ? "sidebar-collapse" : "sidebar-expand"
           onClicked: _sideBar.sideBar.toggle()
       }
 
       Maui.Holder
       {
           anchors.fill: parent
           title: "Page"
           body: "Page main content."
           emoji: "application-x-addon-symbolic"
       }
   }
}

Notes

The width of the sidebar section will always be restrained to a maximum value less than the window width - by reserving a sane margin to be able to close the sidebar by clicking/pressing outside of it.

To place an item in the sidebar, use the exposed alias property.

See also

sideBarContent

You can find a more complete example at this link.

Definition at line 97 of file SideBarView.qml.

Property Documentation

content

alias SideBarView::content

read

All child items declared will become part of the main area section.

Remarks

This is the default property

Definition at line 105 of file SideBarView.qml.

sideBar

alias SideBarView::sideBar

read

This is an alias exposed to access all the sidebar section properties.

To know more about the available properties visit the control documentation.

See also

SideBar

SideBarView
{
     sideBar.collapsed: width < 800
     sideBar.resizeable: false
     sideBar.autoHide: true
}

Remarks

This property is read-only

Definition at line 126 of file SideBarView.qml.

sideBarContent

alias SideBarView::sideBarContent

read

Convenient property to easily add items to the sidebar section.

Definition at line 110 of file SideBarView.qml.

---

The documentation for this class was generated from the following file:

• SideBarView.qml