docs(vuetify): 01_menu_v3.py

Author: jourdain

examples/02_vuetify/01_menu_v3.py

@@ -1,44 +1,40 @@
-from trame.app import get_server
+from trame.app import TrameApp
 from trame.ui.vuetify3 import SinglePageLayout
-from trame.widgets import vuetify3 as vuetify
+from trame.widgets import vuetify3 as v3
 
-# -----------------------------------------------------------------------------
-# Trame setup
-# -----------------------------------------------------------------------------
 
-server = get_server()
-state, ctrl = server.state, server.controller
+class Demo(TrameApp):
+    def __init__(self, server=None):
+        super().__init__(server)
 
-state.menu_items = ["one", "two", "three"]
+        # Set state values
+        self.state.trame__title = "Menu example"
+        self.state.menu_items = ["one", "two", "three"]
 
+        self._build_ui()
 
-def print_item(item):
-    print("Clicked on", item)
+    def _build_ui(self):
+        with SinglePageLayout(self.server) as self.ui:
+            with self.ui.toolbar:
+                v3.VSpacer()
+                with v3.VMenu():
+                    with v3.Template(v_slot_activator="{ props }"):
+                        v3.VBtn(icon="mdi-dots-vertical", v_bind="props")
 
+                    with v3.VList():
+                        v3.VListItem(
+                            v_for="(item, i) in menu_items",
+                            key="i",
+                            value=("item",),
+                            click=(self.print_item, "[item]"),
+                            title=("item",),
+                        )
 
-# -----------------------------------------------------------------------------
-# GUI
-# -----------------------------------------------------------------------------
 
-state.trame__title = "Menu example"
+    def print_item(self, item):
+        print("Clicked on", item)
 
-with SinglePageLayout(server) as layout:
-    with layout.toolbar:
-        vuetify.VSpacer()
-        with vuetify.VMenu():
-            with vuetify.Template(v_slot_activator="{ on, attrs }"):
-                with vuetify.VBtn(icon=True, v_bind="attrs", v_on="on"):
-                    vuetify.VIcon("mdi-dots-vertical")
-            with vuetify.VList():
-                with vuetify.VListItem(
-                    v_for="(item, i) in menu_items",
-                    key="i",
-                    value=["item"],
-                ):
-                    vuetify.VBtn(
-                        "{{ item }}",
-                        click=(print_item, "[item]"),
-                    )
 
 if __name__ == "__main__":
-    server.start()
+    app = Demo()
+    app.server.start()