diff --git a/qml/articles/7.Adding_a_sidebar.md b/qml/articles/7.Adding_a_sidebar.md new file mode 100644 index 0000000..7e30669 --- /dev/null +++ b/qml/articles/7.Adding_a_sidebar.md @@ -0,0 +1,53 @@ +# 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.) + +![Window with sidebar and view menu](../images/tutorial7/sidebar_and_view_menu.png) + +### Code +The code for this example can be found at +[extensions/qml_tutorial_7](../extensions/qml_tutorial_7) diff --git a/qml/extensions/qml_tutorial_7/main.qml b/qml/extensions/qml_tutorial_7/main.qml new file mode 100644 index 0000000..8b3d63d --- /dev/null +++ b/qml/extensions/qml_tutorial_7/main.qml @@ -0,0 +1,43 @@ +import org.kde.falkon 1.0 as Falkon +import QtQuick.Controls 2.3 +import QtQuick 2.3 + +Falkon.PluginInterface { + + init: function(state, settingsPath) { + console.log(i18n('"Tutorial7" plugin loaded')) + } + + testPlugin: function() { + return true + } + + unload: function() { + console.log(i18n('"Tutorial7" plugin unloaded')) + } + + /* Taken from "Hello Qml" example */ + Falkon.SideBar { + name: 'qml-tutorial7-sidebar' + title: i18n('Tutorial 7 - QML SideBar') + icon: 'falkon' + checkable: true + shortcut: 'Ctrl+Shift+Alt+S' + Rectangle { + Image { + source: 'qrc:/icons/other/startpage.svg' + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.right: parent.right + } + + Button { + text: i18n('Hello Qml Plugin') + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + } + } + } + +} diff --git a/qml/extensions/qml_tutorial_7/metadata.desktop b/qml/extensions/qml_tutorial_7/metadata.desktop new file mode 100644 index 0000000..0ce9cef --- /dev/null +++ b/qml/extensions/qml_tutorial_7/metadata.desktop @@ -0,0 +1,11 @@ +[Desktop Entry] +Name=Tutorial7 QML +Comment=Example QML extension with sidebar +Icon= +Type=Service +X-Falkon-Type=Extension/Qml + +X-Falkon-Author=Juraj Oravec +X-Falkon-Email=jurajoravec@mailo.com +X-Falkon-Version=1.0.0 +X-Falkon-Settings=false diff --git a/qml/images/tutorial7/sidebar_and_view_menu.png b/qml/images/tutorial7/sidebar_and_view_menu.png new file mode 100644 index 0000000..7de2460 Binary files /dev/null and b/qml/images/tutorial7/sidebar_and_view_menu.png differ