1
FalkonTutorials/qml/articles/7.Adding_a_sidebar.md
Juraj Oravec bc2d18b285
QML: Switch to Pane for sidebar tutorial
Signed-off-by: Juraj Oravec <jurajoravec@mailo.com>
2022-07-14 11:00:31 +02:00

56 lines
1.4 KiB
Markdown

# Falkon QML Tutorial - 7. Adding a sidebar
Hello, in this chapter I will show you how to create a custom sidebar.
## Create sidebar
```qml
import QtQuick.Controls 2.3
Falkon.SideBar {
name: 'qml-tutorial7-sidebar'
title: i18n('Tutorial 7 - QML SideBar')
icon: 'falkon'
checkable: false
shortcut: 'Ctrl+Shift+Alt+S'
Pane {
/* Actual UI and some drawing logic */
}
}
```
### Falkon.SideBar
#### name
Internal name of the sidebar. This is required property.
#### title
Sidebar title visible when sidebar is enabled and also displayed in the
menu when selecting sidebars.
#### icon
Icon for sidebar, well I do not know if it is used properly since I did
not see it anywhere in the program window.
#### checkable
Should be for the menu, I am not very sure of its usage.
#### shortcut
Looks like a global keyboard shortcut to show&hide the sidebar.
#### default item
There has to be a "body" of sidebar of some sort to display. Use some
Qml stuff here. (I lack Qml knowledge.)
## Example
The example will add a sidebar and in it will be an image and a button.
This example is ripped of from Falkon default "Hello Qml" extension with
addition of a keyboard shortcut.
(I am not gonna re-invent a wheel.)
![Window with sidebar and view menu](../images/qml_tutorial7/sidebar_and_view_menu.png)
### Code
The code for this example can be found at
[extensions/qml_tutorial_7](../extensions/qml_tutorial_7)