Skip to content

Commit 493048f

Browse files
manoldonevmanoldonev
authored
docs(flexbox layout) add flexbox layout code snippets (#1124)
1 parent 2e944a8 commit 493048f

File tree

2 files changed

+99
-41
lines changed

2 files changed

+99
-41
lines changed

‎tests/app/snippets/layouts.component.html‎

Lines changed: 97 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<ScrollView orientation="vertical">
22
<StackLayout id="main">
33
<Label text="Absolute Layout" class="title"></Label>
4-
5-
<!-- >> absolute-layout -->
4+
5+
<!-- >> absolute-layout -->
66
<AbsoluteLayout width="210" height="210" backgroundColor="lightgray">
77
<Label text="10, 10" left="10" top="10" width="90" height="90" backgroundColor="red"></Label>
88
<Label text="110, 10" left="110" top="10" width="90" height="90" backgroundColor="green"></Label>
@@ -11,24 +11,24 @@
1111
</AbsoluteLayout>
1212
<!-- << absolute-layout -->
1313

14-
<!-- >> absolute-layout-margin -->
14+
<!-- >> absolute-layout-margin -->
1515
<AbsoluteLayout width="210" height="210" backgroundColor="lightgray">
1616
<Label text="no margin" left="10" top="10" width="100" height="100" backgroundColor="red"></Label>
1717
<Label text="margin=`30`" left="10" top="10" margin="30" width="100" height="90" backgroundColor="green"></Label>
1818
</AbsoluteLayout>
1919
<!-- << absolute-layout-margin -->
20-
20+
2121
<Label text="Dock Layout" class="title"></Label>
22-
23-
<!-- >> dock-layout -->
22+
23+
<!-- >> dock-layout -->
2424
<DockLayout width="210" height="210" backgroundColor="lightgray" stretchLastChild="false">
2525
<Label text="left" dock="left" width="60" backgroundColor="red"></Label>
2626
<Label text="top" dock="top" height="60" backgroundColor="green"></Label>
2727
<Label text="right" dock="right" width="60" backgroundColor="blue"></Label>
2828
<Label text="bottom" dock="bottom" height="60" backgroundColor="yellow"></Label>
2929
</DockLayout>
3030
<!-- << dock-layout -->
31-
31+
3232
<!-- >> dock-layout-stretch-last -->
3333
<DockLayout width="210" height="210" backgroundColor="lightgray" stretchLastChild="true">
3434
<Label text="left" dock="left" backgroundColor="red"></Label>
@@ -37,7 +37,7 @@
3737
<Label text="bottom" dock="bottom" backgroundColor="yellow"></Label>
3838
</DockLayout>
3939
<!-- << dock-layout-stretch-last -->
40-
40+
4141
<!-- >> dock-layout-one-side -->
4242
<DockLayout width="210" height="210" backgroundColor="lightgray" stretchLastChild="true">
4343
<Label text="left1" dock="left" backgroundColor="red"></Label>
@@ -46,11 +46,11 @@
4646
<Label text="last child" backgroundColor="yellow"></Label>
4747
</DockLayout>
4848
<!-- << dock-layout-one-side -->
49-
49+
5050
<Label text="Grid Layout" class="title"></Label>
51-
52-
<!-- >> grid-layout-sample -->
53-
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210" backgroundColor="lightgray" >
51+
52+
<!-- >> grid-layout-sample -->
53+
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210" backgroundColor="lightgray">
5454
<Label text="Label 1" row="0" col="0" backgroundColor="red"></Label>
5555
<Label text="Label 2" row="0" col="1" colSpan="2" backgroundColor="green"></Label>
5656
<Label text="Label 3" row="1" col="0" rowSpan="2" backgroundColor="blue"></Label>
@@ -60,53 +60,53 @@
6060
<Label text="Label 7" row="2" col="2" backgroundColor="purple"></Label>
6161
</GridLayout>
6262
<!-- << grid-layout-sample -->
63-
64-
<!-- >> grid-layout-star -->
65-
<GridLayout columns="*,2*" rows="2*,3*" width="300" height="300" backgroundColor="lightgray" >
63+
64+
<!-- >> grid-layout-star -->
65+
<GridLayout columns="*,2*" rows="2*,3*" width="300" height="300" backgroundColor="lightgray">
6666
<Label text="Label 1" col="0" row="0" backgroundColor="red"></Label>
6767
<Label text="Label 2" col="1" row="0" backgroundColor="green"></Label>
6868
<Label text="Label 3" col="0" row="1" backgroundColor="blue"></Label>
6969
<Label text="Label 4" col="1" row="1" backgroundColor="yellow"></Label>
7070
</GridLayout>
7171
<!-- << grid-layout-star -->
72-
73-
<!-- >> grid-layout-fexed-auto -->
74-
<GridLayout columns="100,auto" rows="100,auto" width="210" height="210" backgroundColor="lightgray" >
72+
73+
<!-- >> grid-layout-fexed-auto -->
74+
<GridLayout columns="100,auto" rows="100,auto" width="210" height="210" backgroundColor="lightgray">
7575
<Label text="Label 1" col="0" row="0" backgroundColor="red"></Label>
7676
<Label text="Label 2" col="1" row="0" backgroundColor="green"></Label>
7777
<Label text="Label 3" col="0" row="1" backgroundColor="blue"></Label>
7878
<Label text="Label 4" col="1" row="1" backgroundColor="yellow"></Label>
7979
</GridLayout>
8080
<!-- << grid-layout-fexed-auto -->
81-
82-
<!-- >> grid-layout-no-width -->
81+
82+
<!-- >> grid-layout-no-width -->
8383
<StackLayout width="200" height="200" backgroundColor="palegreen">
84-
<GridLayout columns="*,2*" horizontalAlignment="left" verticalAlignment="top" backgroundColor="lightgray" >
84+
<GridLayout columns="*,2*" horizontalAlignment="left" verticalAlignment="top" backgroundColor="lightgray">
8585
<Label text="Label 1" col="0" backgroundColor="red"></Label>
8686
<Label text="Label 2" col="1" backgroundColor="green"></Label>
8787
</GridLayout>
8888
</StackLayout>
8989
<!-- << grid-layout-no-width -->
90-
90+
9191
<!-- >> grid-layout-column-stretch -->
92-
<GridLayout columns="auto,100" rows="auto,auto" width="300" height="300" backgroundColor="lightgray" >
92+
<GridLayout columns="auto,100" rows="auto,auto" width="300" height="300" backgroundColor="lightgray">
9393
<Label text="Label 1" col="0" row="0" backgroundColor="red"></Label>
9494
<Label text="Label 2" col="1" row="0" backgroundColor="green"></Label>
9595
<Label text="Label 3" width="150" col="0" row="1" backgroundColor="blue"></Label>
9696
</GridLayout>
9797
<!-- << grid-layout-column-stretch -->
98-
99-
<!-- >> grid-layout-complex -->
98+
99+
<!-- >> grid-layout-complex -->
100100
<GridLayout columns="auto, *, auto" rows="auto, 25" verticalAlignment="top" backgroundColor="lightgray">
101101
<Image src="~/cute.jpg" rowSpan="2" width="72" height="72" margin="3" verticalAlignment="top"></Image>
102102
<Label text="My cat loves the camera" textWrap="true" col="1" colSpan="2" minHeight="50" fontSize="20" margin="3"></Label>
103103
<Label text="John Smith" col="1" row="1" fontSize="14" horizontalAlignment="left" verticalAlignment="bottom" margin="3"></Label>
104104
<Label text="comments: 26" col="2" row="1" color="#10C2B0" fontSize="14" verticalAlignment="bottom" margin="3"></Label>
105105
</GridLayout>
106106
<!-- << grid-layout-complex -->
107-
107+
108108
<Label text="Stack Layout" class="title"></Label>
109-
109+
110110
<!-- >> stack-layout-vertical -->
111111
<StackLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
112112
<Label text="Label 1" width="50" height="50" backgroundColor="red"></Label>
@@ -115,45 +115,45 @@
115115
<Label text="Label 4" width="50" height="50" backgroundColor="yellow"></Label>
116116
</StackLayout>
117117
<!-- << stack-layout-vertical -->
118-
118+
119119
<!-- >> stack-layout-horizontal -->
120120
<StackLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
121121
<Label text="Label 1" width="50" height="50" backgroundColor="red"></Label>
122122
<Label text="Label 2" width="50" height="50" backgroundColor="green"></Label>
123123
<Label text="Label 3" width="50" height="50" backgroundColor="blue"></Label>
124124
<Label text="Label 4" width="50" height="50" backgroundColor="yellow"></Label>
125-
</StackLayout>
125+
</StackLayout>
126126
<!-- << stack-layout-horizontal -->
127-
128-
<!-- >> stack-layout-vertical-align -->
127+
128+
<!-- >> stack-layout-vertical-align -->
129129
<StackLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
130130
<Label text="Label 1" horizontalAlignment="left" backgroundColor="red"></Label>
131131
<Label text="Label 2" horizontalAlignment="center" backgroundColor="green"></Label>
132132
<Label text="Label 3" horizontalAlignment="right" backgroundColor="blue"></Label>
133133
<Label text="Label 4" horizontalAlignment="stretch" backgroundColor="yellow"></Label>
134134
</StackLayout>
135135
<!-- << stack-layout-vertical-align -->
136-
136+
137137
<!-- >> stack-layout-horizontal-align -->
138-
<StackLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
138+
<StackLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
139139
<Label text="Label 1" verticalAlignment="top" backgroundColor="red"></Label>
140140
<Label text="Label 2" verticalAlignment="center" backgroundColor="green"></Label>
141141
<Label text="Label 3" verticalAlignment="bottom" backgroundColor="blue"></Label>
142142
<Label text="Label 4" verticalAlignment="stretch" backgroundColor="yellow"></Label>
143-
</StackLayout>
143+
</StackLayout>
144144
<!-- << stack-layout-horizontal-align -->
145-
145+
146146
<Label text="Wrap Layout" class="title"></Label>
147-
148-
<!-- >> wrap-layout-horizontal -->
147+
148+
<!-- >> wrap-layout-horizontal -->
149149
<WrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
150150
<Label text="Label 1" width="70" height="70" backgroundColor="red"></Label>
151151
<Label text="Label 2" width="70" height="70" backgroundColor="green"></Label>
152152
<Label text="Label 3" width="70" height="70" backgroundColor="blue"></Label>
153153
<Label text="Label 4" width="70" height="70" backgroundColor="yellow"></Label>
154154
</WrapLayout>
155155
<!-- << wrap-layout-horizontal -->
156-
156+
157157
<!-- >> wrap-layout-vertical -->
158158
<WrapLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
159159
<Label text="Label 1" width="70" height="70" backgroundColor="red"></Label>
@@ -162,7 +162,7 @@
162162
<Label text="Label 4" width="70" height="70" backgroundColor="yellow"></Label>
163163
</WrapLayout>
164164
<!-- << wrap-layout-vertical -->
165-
165+
166166
<!-- >> wrap-layout-item -->
167167
<WrapLayout itemWidth="30" itemHeight="30" width="210" height="210" backgroundColor="lightgray">
168168
<Label text="Label 1" width="70" height="70" backgroundColor="red"></Label>
@@ -171,5 +171,62 @@
171171
<Label text="Label 4" width="70" height="70" backgroundColor="yellow"></Label>
172172
</WrapLayout>
173173
<!-- << wrap-layout-item -->
174+
175+
<Label text="Flexbox Layout" class="title"></Label>
176+
177+
<!-- >> flexbox-layout-flexdirection-row -->
178+
<FlexboxLayout width="300" height="300" backgroundColor="lightgray">
179+
<Label text="Label 1" width="70" height="70" backgroundColor="red" />
180+
<Label text="Label 2" width="70" height="70" backgroundColor="green" />
181+
<Label text="Label 3" width="70" height="70" backgroundColor="blue" />
182+
<Label text="Label 4" width="70" height="70" backgroundColor="yellow" />
183+
</FlexboxLayout>
184+
<!-- << flexbox-layout-flexdirection-row -->
185+
186+
<!-- >> flexbox-layout-flexdirection-column -->
187+
<FlexboxLayout flexDirection="column" width="300" height="300" backgroundColor="lightgray">
188+
<Label text="Label 1" width="70" height="70" backgroundColor="red" />
189+
<Label text="Label 2" width="70" height="70" backgroundColor="green" />
190+
<Label text="Label 3" width="70" height="70" backgroundColor="blue" />
191+
<Label text="Label 4" width="70" height="70" backgroundColor="yellow" />
192+
</FlexboxLayout>
193+
<!-- << flexbox-layout-flexdirection-column -->
194+
195+
<!-- >> flexbox-layout-alignItems-flex-start -->
196+
<FlexboxLayout alignItems="flex-start" width="300" height="300" backgroundColor="lightgray">
197+
<Label text="Label 1" width="70" height="70" backgroundColor="red" />
198+
<Label text="Label 2" width="70" height="70" backgroundColor="green" />
199+
<Label text="Label 3" width="70" height="70" backgroundColor="blue" />
200+
<Label text="Label 4" width="70" height="70" backgroundColor="yellow" />
201+
</FlexboxLayout>
202+
<!-- << flexbox-layout-alignItems-flex-start -->
203+
204+
<!-- >> flexbox-layout-order -->
205+
<FlexboxLayout alignItems="flex-start" width="300" height="300" backgroundColor="lightgray">
206+
<Label order="3" text="Label 1" width="70" height="70" backgroundColor="red" />
207+
<Label order="4" text="Label 2" width="70" height="70" backgroundColor="green" />
208+
<Label order="2" text="Label 3" width="70" height="70" backgroundColor="blue" />
209+
<Label order="1" text="Label 4" width="70" height="70" backgroundColor="yellow" />
210+
</FlexboxLayout>
211+
<!-- << flexbox-layout-order -->
212+
213+
<!-- >> flexbox-layout-flexWrap -->
214+
<FlexboxLayout flexWrap="wrap" height="300" width="300" backgroundColor="lightgray">
215+
<Label text="Label 1" width="100" height="50" backgroundColor="red" />
216+
<Label text="Label 2" width="100" height="50" backgroundColor="green" />
217+
<Label text="Label 3" width="100" height="50" backgroundColor="blue" />
218+
<Label text="Label 4" width="100" height="50" backgroundColor="yellow" />
219+
</FlexboxLayout>
220+
<!-- << flexbox-layout-flexWrap -->
221+
222+
<!-- >> flexbox-layout-alignSelf -->
223+
<FlexboxLayout flexDirection="column-reverse" justifyContent="space-around" alignItems="stretch" height="300" width="300"
224+
backgroundColor="lightgray">
225+
<Label text="Label 1" width="50" height="50" backgroundColor="red" />
226+
<Label alignSelf="center" text="Label 2" width="50" height="50" backgroundColor="green" />
227+
<Label alignSelf="flex-end" text="Label 3" width="50" height="50" backgroundColor="blue" />
228+
<Label text="Label 4" width="50" height="50" backgroundColor="yellow" />
229+
</FlexboxLayout>
230+
<!-- << flexbox-layout-alignSelf -->
174231
</StackLayout>
175-
</ScrollView>
232+
</ScrollView>

‎tests/app/snippets/layouts.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import {Component} from "@angular/core";
1010
"#main > DockLayout { margin: 10 }",
1111
"#main > GridLayout { margin: 10 }",
1212
"#main > StackLayout { margin: 10 }",
13-
"#main > WrapLayout { margin: 10 }"
13+
"#main > WrapLayout { margin: 10 }",
14+
"#main > FlexboxLayout { margin: 10 }"
1415
]
1516
})
1617
export class LayoutsComponent {

0 commit comments

Comments
 (0)