74 lines
1.7 KiB
Markdown
74 lines
1.7 KiB
Markdown
|
## Adding a sidebar section
|
||
|
|
|
||
|
|
The sidebar and each section is defined at `AppMain.qml`, it contains
|
||
|
|
|
||
|
|
* sidebar - `TabBar` with `TabButton` elements
|
||
|
|
* main section - `StackLayout`
|
||
|
|
|
||
|
|
The currently displayed section in the `StackLayout` is determined by the `currentIndex` property, for example `0` will show the first child (in this case `ChatLayout`), `1` will show the second child, and so on
|
||
|
|
|
||
|
|
This property is being defined by whatever is the currently selected button in the `Tabbar` with `currentIndex: tabBar.currentIndex`
|
||
|
|
|
||
|
|
```qml
|
||
|
|
TabBar {
|
||
|
|
id: tabBar
|
||
|
|
|
||
|
|
TabButton { ... }
|
||
|
|
TabButton { ... }
|
||
|
|
...
|
||
|
|
}
|
||
|
|
|
||
|
|
StackLayout {
|
||
|
|
...
|
||
|
|
currentIndex: tabBar.currentIndex
|
||
|
|
|
||
|
|
ChatLayout {}
|
||
|
|
WalletLayout {}
|
||
|
|
...
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
To add a new section, then add a new TabButton to the TabBar, for example:
|
||
|
|
|
||
|
|
```qml
|
||
|
|
TabBar {
|
||
|
|
...
|
||
|
|
TabButton {
|
||
|
|
id: myButton
|
||
|
|
visible: this.enabled
|
||
|
|
width: 40
|
||
|
|
height: this.enabled ? 40 : 0
|
||
|
|
text: ""
|
||
|
|
anchors.topMargin: this.enabled ? 50 : 0
|
||
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
||
|
|
anchors.top: nodeBtn.top // needs to be previous button
|
||
|
|
background: Rectangle {
|
||
|
|
color: Theme.lightBlue
|
||
|
|
opacity: parent.checked ? 1 : 0
|
||
|
|
radius: 50
|
||
|
|
}
|
||
|
|
|
||
|
|
Image {
|
||
|
|
anchors.verticalCenter: parent.verticalCenter
|
||
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
||
|
|
fillMode: Image.PreserveAspectFit
|
||
|
|
source: parent.checked ? "img/node.svg" : "img/node.svg"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Then a section to the StackLayout
|
||
|
|
|
||
|
|
```qml
|
||
|
|
StackLayout {
|
||
|
|
...
|
||
|
|
|
||
|
|
Text {
|
||
|
|
text: "hello world!"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
The section can be any qml element, to create your own custom element, see the next section
|