54 lines
1.4 KiB
Markdown
54 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
|
|
Falkon.SideBar {
|
|
name: 'qml-tutorial7-sidebar'
|
|
title: i18n('Tutorial 7 - QML SideBar')
|
|
icon: 'falkon'
|
|
checkable: false
|
|
shortcut: 'Ctrl+Shift+Alt+S'
|
|
Rectangle {
|
|
/* 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.)
|
|
|
|
|
|
|
|
### Code
|
|
The code for this example can be found at
|
|
[extensions/qml_tutorial_7](../extensions/qml_tutorial_7)
|