SideBarView

Search for usage in LXR

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"
}
}
}
alias sideBarContent
Convenient property to easily add items to the sidebar section.
void toggle()
Switch between the open and closed states.

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
{
sideBar.collapsed: width < 800
sideBar.resizeable: false
sideBar.autoHide: true
}
A view with a collapsible sidebar.
alias sideBar
This is an alias exposed to access all the sidebar section properties.
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:
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Mon Nov 4 2024 16:29:24 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.