-
Notifications
You must be signed in to change notification settings - Fork 259
/
box_vs_fix_layout.py
73 lines (60 loc) · 2.77 KB
/
box_vs_fix_layout.py
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
# doc-export: Boxes
"""
Example that puts box and fix mode HVLayout's side-by-side. You can see how
box mode takes the natural size of content into account, making it
more suited for low-level layout. For higher level layout (e.g. the two
main panels in this example) the fix or split mode is more appropriate.
"""
from flexx import flx
class Panel(flx.Label):
CSS = '.flx-Panel {background: #66dd88; color: #FFF; padding: 1px;}'
class Boxes(flx.Widget):
def init(self):
with flx.HSplit():
with flx.VBox(flex=1):
flx.Label(html='<b>Box mode</b> (aware of natural size)')
flx.Label(text='flex: 1, sub-flexes: 0, 0, 0')
with flx.HBox(flex=1):
Panel(text='A', flex=0)
Panel(text='B', flex=0)
Panel(text='C is a bit longer', flex=0)
flx.Label(text='flex: 0, sub-flexes: 1, 1, 1')
with flx.HBox(flex=0):
Panel(text='A', flex=1)
Panel(text='B', flex=1)
Panel(text='C is a bit longer', flex=1)
flx.Label(text='flex: 1, sub-flexes: 1, 0, 2')
with flx.HBox(flex=1):
Panel(text='A', flex=1)
Panel(text='B', flex=0)
Panel(text='C is a bit longer', flex=2)
flx.Label(text='flex: 2, sub-flexes: 1, 2, 3')
with flx.HBox(flex=2):
Panel(text='A', flex=1)
Panel(text='B', flex=2)
Panel(text='C is a bit longer', flex=3)
with flx.VBox(flex=1):
flx.Label(html='<b>Fix mode</b> (high level layout)')
flx.Label(text='flex: 1, sub-flexes: 0, 0, 0')
with flx.HFix(flex=1):
Panel(text='A', flex=0)
Panel(text='B', flex=0)
Panel(text='C is a bit longer', flex=0)
flx.Label(text='flex: 0 (collapses), sub-flexes: 1, 1, 1')
with flx.HFix(flex=0):
Panel(text='A', flex=1, style='min-height:5px;')
Panel(text='B', flex=1)
Panel(text='C is a bit longer', flex=1)
flx.Label(text='flex: 1, sub-flexes: 1, 0, 2')
with flx.HFix(flex=1):
Panel(text='A', flex=1)
Panel(text='B', flex=0)
Panel(text='C is a bit longer', flex=2)
flx.Label(text='flex: 2, sub-flexes: 1, 2, 3')
with flx.HFix(flex=2):
Panel(text='A', flex=1)
Panel(text='B', flex=2)
Panel(text='C is a bit longer', flex=3)
if __name__ == '__main__':
m = flx.launch(Boxes)
flx.run()