trame_vuetify_slider_state_binding_quickstart.py

1from trame.app import get_server
2from trame.ui.vuetify import SinglePageLayout
3from trame.widgets import vuetify
4
5# -----------------------------------------------------------------------------
6# Trame setup
7# -----------------------------------------------------------------------------
8
9server = get_server()
10state, ctrl = server.state, server.controller
11
12state.count = 1
13
14# -----------------------------------------------------------------------------
15# GUI
16# -----------------------------------------------------------------------------
17
18with SinglePageLayout(server) as layout:
19    layout.title.set_text("Trame Quickstart")
20
21    with layout.toolbar:
22        vuetify.VSpacer()
23        vuetify.VSlider(
24            v_model=("count", 1),
25            min=1,
26            max=10,
27            step=1,
28            hide_details=True,
29            dense=True,
30            style="max-width: 300px",
31        )
32        vuetify.VDivider(vertical=True, classes="mx-2")
33        with vuetify.VBtn(icon=True, click="count = 1"):
34            vuetify.VIcon("mdi-refresh")
35
36    with layout.content:
37        with vuetify.VContainer(fluid=True):
38            with vuetify.VRow():
39                with vuetify.VCol():
40                    vuetify.VCard(
41                        "The current count is {{ count }}",
42                        classes="pa-4 text-center text-h4",
43                    )
44
45# -----------------------------------------------------------------------------
46# Main
47# -----------------------------------------------------------------------------
48
49if __name__ == "__main__":
50    server.start()