Skip to content

Instantly share code, notes, and snippets.

@jochumdev
Forked from anonymous/Accordion.qml
Last active August 23, 2023 09:18
Show Gist options
  • Save jochumdev/c03845aa9449168b7d24c491ad913fce to your computer and use it in GitHub Desktop.
Save jochumdev/c03845aa9449168b7d24c491ad913fce to your computer and use it in GitHub Desktop.
import QtQuick 2.9
import QtQuick.Controls 2.2
Column {
width: parent.width
height: parent.height
property alias model: columnRepeater.model
ListView {
id: columnRepeater
delegate: accordion
width: parent.width
height: parent.height
model: ListModel { }
ScrollBar.vertical: ScrollBar { }
}
Component {
id: accordion
Column {
width: parent.width
Item {
id: infoRow
width: parent.width
height: childrenRect.height
property bool expanded: false
MouseArea {
anchors.fill: parent
onClicked: infoRow.expanded = !infoRow.expanded
enabled: childrens ? true : false
}
Image {
id: carot
anchors {
top: parent.top
left: parent.left
margins: 5
}
sourceSize.width: 16
sourceSize.height: 16
source: 'images/triangle.svg'
visible: childrens.count > 0 ? true : false
transform: Rotation {
origin.x: 5
origin.y: 10
angle: infoRow.expanded ? 90 : 0
Behavior on angle { NumberAnimation { duration: 150 } }
}
}
Text {
anchors {
left: carot.visible ? carot.right : parent.left
top: parent.top
margins: 5
}
visible: parent.visible
text: label
}
Text {
visible: infoRow.visible
text: type
anchors {
top: parent.top
right: parent.right
margins: 5
rightMargin: 15
}
}
}
ListView {
id: subentryColumn
x: 20
width: parent.width - x
height: childrenRect.height * opacity
visible: opacity > 0
opacity: infoRow.expanded ? 1 : 0
delegate: accordion
model: childrens ? childrens : []
interactive: false
Behavior on opacity { NumberAnimation { duration: 200 } }
}
}
}
}
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
width: 640
height: 480
title: 'Accordion'
visible: true
Accordion {
id: tree
anchors.fill: parent
anchors.margins: 10
}
function update() {
var data = [
{"childrens":[{"childrens":[{"childrens":[],"label":"101 (ubuntu-xenial)","type":"lxc"},{"childrens":[],"label":"100 (pvetest-stretch)","type":"qemu"}],"label":"debianpro","type":"node"}],"label":"debianpro","type":"remote"},
{"childrens":[{"childrens":[{"childrens":[],"label":"103 (stretch01)","type":"lxc"},{"childrens":[],"label":"104 (ubuntu18-ct)","type":"lxc"},{"childrens":[],"label":"107 (no-ipv4)","type":"lxc"},{"childrens":[],"label":"100 (Win10MSEdge)","type":"qemu"},{"childrens":[],"label":"101 (Win7IE8)","type":"qemu"},{"childrens":[],"label":"102 (stretchdocker)","type":"qemu"},{"childrens":[],"label":"106 (ubuntu18-vm)","type":"qemu"},{"childrens":[],"label":"108 (pve5.2)","type":"qemu"}],"label":"nena","type":"node"}],"label":"nena","type":"remote"},
{"childrens":[{"childrens":[{"childrens":[],"label":"101 (saltmaster)","type":"lxc"},{"childrens":[],"label":"102 (gitlab)","type":"lxc"},{"childrens":[],"label":"103 (aptcacher)","type":"lxc"},{"childrens":[],"label":"104 (psql1)","type":"lxc"},{"childrens":[],"label":"105 (monitor1)","type":"lxc"},{"childrens":[],"label":"106 (spads01)","type":"lxc"},{"childrens":[],"label":"111 (file01)","type":"lxc"},{"childrens":[],"label":"100 (win10)","type":"qemu"}],"label":"srv01","type":"node"}],"label":"srv01","type":"remote"}
];
tree.model.clear();
data.forEach(function(row) {
tree.model.append(row);
});
}
Component.onCompleted: {
update();
}
}
@GiancarloF
Copy link

GiancarloF commented Nov 8, 2018

It would be nice the possibility to add subitems at runtime, keeping the scroll position

@danieloneill
Copy link

Brilliant, nice work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment