forked from papyros/qml-material
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathSidebar.qml
More file actions
151 lines (118 loc) · 3.91 KB
/
Copy pathSidebar.qml
File metadata and controls
151 lines (118 loc) · 3.91 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
/*
* QML Material - An application framework implementing Material Design.
*
* Copyright (C) 2014-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 Material 0.3
import "ListItems" as ListItem
/*!
\qmltype Sidebar
\inqmlmodule Material
\brief A sidebar component for use in adaptive layouts
To use, simply add an instance to your code, and anchor other components to it.
To show or hide, set the expanded property.
By default, the sidebar has a flickable built in, and whatever contents are added
will be placed in the flickable. When you want this disabled, or want to fill the
entire sidebar, set the autoFill property to false.
Examples:
\qml
Item{
property bool wideAspect: width > gu(80)
Sidebar {
expanded: wideAspect
// Anchoring is automatic
}
}
\endqml
*/
View {
id: root
backgroundColor: style === "default" ? "white" : "#333"
anchors {
left: mode === "left" ? parent.left : undefined
right: mode === "right" ? parent.right : undefined
top: parent.top
bottom: parent.bottom
leftMargin: expanded ? 0 : -width
rightMargin: expanded ? 0 : -width
}
width: 250 * Units.dp
property bool expanded: true
property string mode: "left" // or "right"
property alias header: headerItem.text
property color borderColor: style === "dark" ? Qt.rgba(0.5,0.5,0.5,0.5) : Theme.light.dividerColor
property bool autoFlick: true
default property alias contents: contents.data
Behavior on anchors.leftMargin {
NumberAnimation { duration: 200 }
}
Behavior on anchors.rightMargin {
NumberAnimation { duration: 200 }
}
Rectangle {
color: borderColor
width: 1
anchors {
top: parent.top
bottom: parent.bottom
right: mode === "left" ? parent.right : undefined
left: mode === "right" ? parent.left : undefined
//rightMargin: -1
}
}
Item {
clip: true
anchors {
fill: parent
rightMargin: mode === "left" ? 1 : 0
leftMargin: mode === "right" ? 1 : 0
}
ListItem.Subheader {
id: headerItem
visible: text !== ""
backgroundColor: root.backgroundColor
elevation: flickable.atYBeginning ? 0 : 1
fullWidth: true
z: 2
}
Flickable {
id: flickable
clip: true
anchors {
top: headerItem.visible ? headerItem.bottom : parent.top
left: parent.left
right: parent.right
bottom: parent.bottom
}
contentWidth: width
contentHeight: autoFlick ? contents.height : height
interactive: contentHeight > height
Item {
id: contents
width: flickable.width
height: autoFlick ? childrenRect.height : flickable.height
}
function getFlickableChild(item) {
if (item && item.hasOwnProperty("children")) {
for (var i=0; i < item.children.length; i++) {
var child = item.children[i];
if (internal.isVerticalFlickable(child)) {
if (child.anchors.top === page.top || child.anchors.fill === page) {
return item.children[i];
}
}
}
}
return null;
}
}
Scrollbar {
flickableItem: flickable
}
}
}