QML: Add inytoduction for tabs
Signed-off-by: Juraj Oravec <jurajoravec@mailo.com>
This commit is contained in:
parent
5a0cb99b5f
commit
57b70991e9
99
qml/articles/10.Falkon_tabs.md
Normal file
99
qml/articles/10.Falkon_tabs.md
Normal file
|
@ -0,0 +1,99 @@
|
||||||
|
# Falkon QML Tutorial - 10. Falkon tabs
|
||||||
|
|
||||||
|
Hello, in this chapter I will show you how to work with tabs. Keep in
|
||||||
|
mind that this is just a short example and always check documentation
|
||||||
|
for more information, do not trust me.
|
||||||
|
|
||||||
|
## Access tabs api
|
||||||
|
The tabs API can be accessed through code.
|
||||||
|
```qml
|
||||||
|
Falkon.Tabs
|
||||||
|
```
|
||||||
|
More information can be found in the
|
||||||
|
[documentation](http://falkon.sgorava.xyz/docs/class_qml_tabs.html).
|
||||||
|
|
||||||
|
Most of the functions also returns a result of the operation which can
|
||||||
|
be either `True` or `False`.
|
||||||
|
|
||||||
|
## Switching tabs
|
||||||
|
The current tab can be changed to `previous`, `next` and based on tab
|
||||||
|
`id` as it is stored in Falkon. These function needs to specify the
|
||||||
|
`windowId` and the previous and next tab is based on some Falkon
|
||||||
|
thing which can be changed at least by C++ addon (investigate
|
||||||
|
VerticalTabs extension).
|
||||||
|
|
||||||
|
```qml
|
||||||
|
// the id of the first window is 0, so good enough for an example
|
||||||
|
property int window = 0
|
||||||
|
|
||||||
|
Falkon.Tabs.nextTab(window)
|
||||||
|
Falkon.Tabs.previousTab(window)
|
||||||
|
Falkon.Tabs.setCurrentIndex({
|
||||||
|
windowId: window,
|
||||||
|
index: 0
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## TabBar related operations
|
||||||
|
We can `move`, `pin`, `unpin`, `detach`, `duplicate`, `close`, `reload`,
|
||||||
|
`stop` loading and `add` a tab.
|
||||||
|
|
||||||
|
```qml
|
||||||
|
// the id of the first window is 0, so good enough for an example
|
||||||
|
property int window = 0
|
||||||
|
property int tabIndexFirst = 0
|
||||||
|
property int tabIndexSecond = 1
|
||||||
|
|
||||||
|
// Move second tab to the first position
|
||||||
|
Falkon.Tabs.moveTab({
|
||||||
|
from: tabIndexSecond,
|
||||||
|
to: tabIndexFirst,
|
||||||
|
windowId: window
|
||||||
|
})
|
||||||
|
// Create a new tab
|
||||||
|
Falkon.Tabs.addTab({
|
||||||
|
url: 'https://falkon.org/',
|
||||||
|
windowId: window
|
||||||
|
})
|
||||||
|
|
||||||
|
// The other commands are exactly the same
|
||||||
|
Falkon.Tabs.pinTab({
|
||||||
|
index: tabIndexFirst,
|
||||||
|
windowId: window
|
||||||
|
})
|
||||||
|
Falkon.Tabs.unpinTab({
|
||||||
|
index: tabIndexFirst,
|
||||||
|
windowId: window
|
||||||
|
})
|
||||||
|
Falkon.Tabs.detachTab()
|
||||||
|
Falkon.Tabs.duplicateTab()
|
||||||
|
Falkon.Tabs.closeTab()
|
||||||
|
Falkon.Tabs.reloadTab()
|
||||||
|
Falkon.Tabs.stopTab()
|
||||||
|
```
|
||||||
|
|
||||||
|
## Misc
|
||||||
|
Next we can get an exact tab or all tabs in given window, tab counts and
|
||||||
|
search in tabs.
|
||||||
|
|
||||||
|
```qml
|
||||||
|
// the id of the first window is 0, so good enough for an example
|
||||||
|
property int window = 0
|
||||||
|
property int tabIndexFirst = 0
|
||||||
|
|
||||||
|
var tab = Falkon.Tabs.get({
|
||||||
|
index: tabIndexFirst,
|
||||||
|
windowId: window
|
||||||
|
})
|
||||||
|
var tabsAll = Falkon.Tabs.getAll({
|
||||||
|
windowId: window,
|
||||||
|
withPinned: true
|
||||||
|
})
|
||||||
|
vat tabs = Falkon.Tabs.search({
|
||||||
|
title: 'Falkon',
|
||||||
|
url: 'https://falkon.org/',
|
||||||
|
withPinned: true
|
||||||
|
})
|
||||||
|
var tabsNormal = Falkon.Tabs.normalTabsCount(window)
|
||||||
|
var tabsPinned = Falkon.Tabs.pinnedTabsCount(window)
|
||||||
|
```
|
Loading…
Reference in New Issue
Block a user