forked from papyros/qml-material
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSectionHeader.qml
More file actions
98 lines (76 loc) · 2.64 KB
/
Copy pathSectionHeader.qml
File metadata and controls
98 lines (76 loc) · 2.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/*
* QML Material - An application framework implementing Material Design.
*
* Copyright (C) 2015 Ricardo Vieira <ricardo.vieira@tecnico.ulisboa.pt>
* 2016 Michael Spencer <sonrisesoftware@gmail.com>
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
import QtQuick 2.4
import QtQuick.Layouts 1.1
import Material 0.3
/*!
\qmltype SectionHeader
\inqmlmodule Material.ListItems
\brief A list item that serves as the the header for an expandable list section.
*/
BaseListItem {
id: listItem
property alias text: label.text
property alias iconName: icon.name
property bool expanded: false
height: 48 * Units.dp
RowLayout {
anchors.fill: parent
anchors.leftMargin: listItem.margins
anchors.rightMargin: listItem.margins
spacing: 16 * Units.dp
Item {
Layout.preferredWidth: 40 * Units.dp
Layout.preferredHeight: width
Layout.alignment: Qt.AlignCenter
visible: children.length > 1 || iconName != ""
Icon {
id: icon
anchors {
verticalCenter: parent.verticalCenter
left: parent.left
}
visible: name != ""
color: listItem.expanded ? Theme.primaryColor
: darkBackground ? Theme.dark.iconColor : Theme.light.iconColor
size: 24 * Units.dp
}
}
Label {
id: label
Layout.alignment: Qt.AlignVCenter
Layout.fillWidth: true
elide: Text.ElideRight
style: "subheading"
color: listItem.expanded ? Theme.primaryColor
: darkBackground ? Theme.dark.textColor : Theme.light.textColor
}
Item {
Layout.preferredWidth: 40 * Units.dp
Layout.preferredHeight: width
Layout.alignment: Qt.AlignRight
Icon {
anchors {
verticalCenter: parent.verticalCenter
left: parent.left
}
name: "navigation/expand_more"
rotation: listItem.expanded ? 180 : 0
size: 24 * Units.dp
color: darkBackground ? Theme.dark.iconColor : Theme.light.iconColor
Behavior on rotation {
NumberAnimation { duration: 200 }
}
}
}
}
onClicked: listItem.expanded = !listItem.expanded
}