examples/python/controls/tabs_control.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
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
152
153
154
155
156
157
158
import pglet
from pglet import Icon
from pglet import Stack, Text, Tabs, Tab, Message, Textbox, Button


def tabs(page):

    message = Message(dismiss=True, visible=False)

    def tabs_changed(e):
        message.visible = True
        message.value = f'Tabs changed to "{e.control.value}", count increased'
        e.control.tabs[2].count += 1
        page.update()

    link_tabs = Tabs(
        margin=10,
        on_change=tabs_changed,
        tabs=[
            Tab(
                text="Regular tab",
                controls=[
                    Stack(
                        horizontal=True,
                        controls=[Text("This is tab1"), Text("This is tab1 - line2")],
                    )
                ],
            ),
            Tab(
                icon="Globe",
                text="Tab with icon",
                controls=[
                    Stack(
                        gap=10,
                        controls=[
                            Text(value="This is tab2"),
                            Text(value="This is tab2 - line2"),
                        ],
                    )
                ],
            ),
            Tab(
                text="Tab with icon and count",
                icon="Ringer",
                count=0,
                controls=[
                    Stack(
                        gap=10,
                        controls=[Text("This is tab3"), Text("This is tab3 - line2")],
                    )
                ],
            ),
        ],
    )

    solid_tabs = Tabs(
        solid=True,
        margin="10px",
        tabs=[
            Tab(
                text="JavaScript",
                icon="Code",
                count=10,
                controls=[Textbox(label="Some textbox")],
            ),
            Tab(text="C#", count=30, controls=[Button(text="Hello button!")]),
            Tab(text="Python", count=0, controls=[Text(value="Just text...")]),
        ],
    )

    changeable = Tabs(
        margin=10,
        tabs=[
            Tab(
                text="Left",
                key="left",
                controls=[
                    Stack(
                        padding=10,
                        horizontal_align="center",
                        controls=[Icon("AlignLeft", size=25)],
                    )
                ],
            ),
            Tab(
                text="Center",
                key="center",
                controls=[
                    Stack(
                        padding=10,
                        horizontal_align="center",
                        controls=[Icon("AlignCenter", size=25)],
                    )
                ],
            ),
            Tab(
                text="Right",
                key="right",
                controls=[
                    Stack(
                        padding=10,
                        horizontal_align="center",
                        controls=[Icon("AlignRight", size=25)],
                    )
                ],
            ),
        ],
    )

    def change_tab(direction):
        tabs = changeable.tabs
        keys = [tab.key for tab in tabs]
        current_key = (
            changeable.value or keys[0]
        )  # Workaround for Tabs control initially having no value
        changeable.value = keys[(keys.index(current_key) + direction) % len(tabs)]
        changeable.update()

    tab_controls = Stack(
        horizontal=True,
        controls=[
            Button(icon="ChevronLeftMed", on_click=lambda event: change_tab(-1)),
            Button(icon="ChevronRightMed", on_click=lambda event: change_tab(+1)),
        ],
    )

    changeable_tabs_container = Stack(
        width=200, horizontal_align="center", controls=[changeable, tab_controls]
    )

    return Stack(
        gap=30,
        width="50%",
        controls=[
            message,
            Stack(
                controls=[Text("Link tabs with Change event", size="xLarge"), link_tabs]
            ),
            Stack(controls=[Text("Solid tabs", size="xLarge"), solid_tabs]),
            Stack(
                controls=[
                    Text("Change tabs with buttons", size="xLarge"),
                    changeable_tabs_container,
                ]
            ),
        ],
    )


def main(page):

    page.title = "Tabs control samples"
    page.horizontal_align = "stretch"
    page.update()
    page.add(tabs(page))


pglet.app("python-tabs", target=main)