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
|
from trame.app import get_server
from trame.ui.html import DivLayout
from trame.widgets import helper, html
# From: https://quasar.dev/start/umd
module = dict(
scripts=[
"https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.umd.prod.js",
],
styles=[
"https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons",
"https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.prod.css",
],
vue_use=[
"Quasar",
],
)
QSlider = helper.create_class(
"QSlider",
"q-slider",
module=module,
properties=[
"min",
"max",
],
)
QBtn = helper.create_class(
"QBtn",
"q-btn",
module=module,
properties=[
"label",
],
events=[
"click",
],
)
QCircularProgress = helper.create_class(
"QCircularProgress",
"q-circular-progress",
module=module,
properties=[
"value",
"indeterminate",
"size",
"thickness",
"color",
"center_color",
],
)
# -----------------------------------------------------------------------------
# Trame usage
# -----------------------------------------------------------------------------
server = get_server(client_type="vue3")
def reset():
server.state.value = 5
with DivLayout(server) as layout:
with html.Div(classes="q-pa-md"):
with html.Div(classes="row items-center"):
html.Div("{{ value }}", classes="col-2")
QBtn(label="Hello", classes="col", click=reset)
QCircularProgress(
indeterminate=True,
size="75px",
thickness=0.6,
color="lime",
center_color="grey-8",
classes="q-ma-md col",
)
QSlider(
v_model_number=("value", 0),
min=("1",),
max=("100",),
step=("1",),
classes="col",
)
QCircularProgress(
size="75px",
thickness=0.6,
color="lime",
center_color="grey-8",
classes="q-ma-md col",
value=("value",),
)
server.start()
|
