← Back to branch summary

~zsombi/ubuntu-ui-toolkit/two-pane-pagestack

« back to all changes in this revision

Viewing changes to documentation/snippets/layouts/SimpleLayout.qml

  • Committer: Tarmac
  • Author(s): Zsombor Egri
  • Date: 2013-06-25 16:18:13 UTC
  • mfrom: (502.2.61 layout-plugin)
  • Revision ID: tarmac-20130625161813-82w7ocba5tba47ud
[layouts] Layout factoring.

Approved by PS Jenkins bot, Christian Dywan, Gerry Boland, Zsombor Egri.

Show diffs side-by-side

added added

removed removed

Lines of Context:
documentation/snippets/layouts/SimpleLayout.qml
 
1
/*
 
2
 * Copyright 2013 Canonical Ltd.
 
3
 *
 
4
 * This program is free software; you can redistribute it and/or modify
 
5
 * it under the terms of the GNU Lesser General Public License as published by
 
6
 * the Free Software Foundation; version 3.
 
7
 *
 
8
 * This program is distributed in the hope that it will be useful,
 
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
11
 * GNU Lesser General Public License for more details.
 
12
 *
 
13
 * You should have received a copy of the GNU Lesser General Public License
 
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
15
 */
 
16
 
 
17
import QtQuick 2.0
 
18
import Ubuntu.Components 0.1
 
19
import Ubuntu.Layouts 0.1
 
20
 
 
21
Item {
 
22
    id: root
 
23
    width: units.gu(30)
 
24
    height: units.gu(30)
 
25
 
 
26
    //! [0]
 
27
    Layouts {
 
28
        id: layouts
 
29
        anchors.fill: parent
 
30
 
 
31
        layouts: [
 
32
            //![column]
 
33
            ConditionalLayout {
 
34
                name: "column"
 
35
                when: layouts.width > units.gu(50) && layouts.width <= units.gu(70)
 
36
                Column {
 
37
                    anchors.fill: parent
 
38
                    ItemLayout {
 
39
                        item: "red"
 
40
                        height: parent.height / 3
 
41
                        anchors {
 
42
                            left: parent.left
 
43
                            right: parent.right
 
44
                        }
 
45
                    }
 
46
                    ItemLayout {
 
47
                        item: "green"
 
48
                        height: parent.height / 3
 
49
                        anchors {
 
50
                            left: parent.left
 
51
                            right: parent.right
 
52
                        }
 
53
                    }
 
54
                    ItemLayout {
 
55
                        item: "blue"
 
56
                        height: parent.height / 3
 
57
                        anchors {
 
58
                            left: parent.left
 
59
                            right: parent.right
 
60
                        }
 
61
                    }
 
62
                }
 
63
            },
 
64
            //![column]
 
65
            //![row]
 
66
            ConditionalLayout {
 
67
                name: "row"
 
68
                when: layouts.width > units.gu(70) && layouts.width <= units.gu(90)
 
69
                Row {
 
70
                    anchors.fill: parent
 
71
                    ItemLayout {
 
72
                        item: "blue"
 
73
                        width: parent.width / 3
 
74
                        anchors {
 
75
                            top: parent.top
 
76
                            bottom: parent.bottom
 
77
                        }
 
78
                    }
 
79
                    ItemLayout {
 
80
                        item: "red"
 
81
                        width: parent.width / 3
 
82
                        anchors {
 
83
                            top: parent.top
 
84
                            bottom: parent.bottom
 
85
                        }
 
86
                    }
 
87
                    ItemLayout {
 
88
                        item: "green"
 
89
                        width: parent.width / 3
 
90
                        anchors {
 
91
                            top: parent.top
 
92
                            bottom: parent.bottom
 
93
                        }
 
94
                    }
 
95
                }
 
96
            },
 
97
            //![row]
 
98
            //![hiding-element]
 
99
            ConditionalLayout {
 
100
                name: "hiding-element"
 
101
                when: layouts.width > units.gu(90) && layouts.width < units.gu(100)
 
102
                Row {
 
103
                    anchors.fill: parent
 
104
                    ItemLayout {
 
105
                        item: "red"
 
106
                        width: parent.width / 2
 
107
                        height: units.gu(20)
 
108
                    }
 
109
                    ItemLayout {
 
110
                        item: "green"
 
111
                        width: parent.width / 2
 
112
                        height: units.gu(20)
 
113
                    }
 
114
                }
 
115
            },
 
116
            //![hiding-element]
 
117
            //![showing-more]
 
118
            ConditionalLayout {
 
119
                name: "showing-more"
 
120
                when: layouts.width >= units.gu(100)
 
121
                Flow {
 
122
                    anchors.fill: parent
 
123
                    ItemLayout {
 
124
                        item: "red"
 
125
                        width: units.gu(50)
 
126
                        height: units.gu(20)
 
127
                    }
 
128
                    ItemLayout {
 
129
                        item: "green"
 
130
                        width: units.gu(50)
 
131
                        height: units.gu(20)
 
132
                    }
 
133
                    ItemLayout {
 
134
                        item: "blue"
 
135
                        width: units.gu(50)
 
136
                        height: units.gu(20)
 
137
                    }
 
138
                    Button {
 
139
                        text: "Flow item"
 
140
                        width: units.gu(50)
 
141
                        height: units.gu(20)
 
142
                    }
 
143
                }
 
144
            }
 
145
            //![showing-more]
 
146
        ]
 
147
 
 
148
        //![default layout]
 
149
        Button {
 
150
            id: redButton
 
151
            text: "Item #1"
 
152
            color: "red"
 
153
            Layouts.item: "red"
 
154
            anchors {
 
155
                left: parent.left
 
156
                top: parent.top
 
157
                bottom: parent.bottom
 
158
            }
 
159
            width: units.gu(15)
 
160
        }
 
161
        Button {
 
162
            id: greenButton
 
163
            text: "Item #2"
 
164
            color: "green"
 
165
            Layouts.item: "green"
 
166
            anchors {
 
167
                top: parent.top
 
168
                left: redButton.right
 
169
                right: parent.right
 
170
            }
 
171
            height: units.gu(10)
 
172
        }
 
173
        Button {
 
174
            id: nolayout
 
175
            text: "Non-laid out"
 
176
            color: "brown"
 
177
            anchors {
 
178
                top: greenButton.bottom
 
179
                left: redButton.right
 
180
                right: parent.right
 
181
                bottom: blueButton.top
 
182
            }
 
183
        }
 
184
        Button {
 
185
            id: blueButton
 
186
            text: "Item #3"
 
187
            color: "blue"
 
188
            Layouts.item: "blue"
 
189
            anchors{
 
190
                left: redButton.right
 
191
                right: parent.right
 
192
                bottom: parent.bottom
 
193
            }
 
194
            height: units.gu(10)
 
195
        }
 
196
        //![default layout]
 
197
    }
 
198
    //! [0]
 
199
}