examples/python/controls/resize_stacks.py at main · pglet/examples · GitHub

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
import pglet
from pglet import Stack, Text


def main(page):

    left_column = Stack(
        width="33%",
        height=40,
        bgcolor="Orange10",
        horizontal_align="center",
        vertical_align="center",
        controls=[Text("Column 1")],
    )
    center_column = Stack(
        width="33%",
        height=40,
        bgcolor="CyanBlue10",
        horizontal_align="center",
        vertical_align="center",
        controls=[Text("Column 2")],
    )
    right_column = Stack(
        width="33%",
        height=40,
        bgcolor="YellowGreen10",
        horizontal_align="center",
        vertical_align="center",
        controls=[Text("Column 3")],
    )

    page.add(
        Stack(
            horizontal=True,
            wrap=True,
            gap=0,
            width="100%",
            bgcolor="#ddddee",
            horizontal_align="space-between",
            controls=[left_column, center_column, right_column],
        )
    )

    def page_resize(e):
        print("page_resize:", page.win_width, page.win_height)
        if page.win_width < 576:
            # small device
            left_column.width = center_column.width = right_column.width = "100%"
        elif page.win_width > 576 and page.win_width < 768:
            # medium device
            left_column.width = center_column.width = right_column.width = "50%"
            right_column.width = "100%"
        else:
            # device with a large screen
            left_column.width = center_column.width = right_column.width = "33.3%"
        page.update()

    page.on_resize = page_resize
    page_resize(None)


pglet.app("page-resize", target=main)