docs(example): expend stepper with custom actions

Kitware · Jan 23, 2024 · 66720b6 · 66720b6
1 parent a0e847c
commit 66720b6
Showing 1 changed file with 25 additions and 1 deletion.
diff --git a/examples/vue3/stepper.py b/examples/vue3/stepper.py
@@ -13,6 +13,9 @@ def __init__(self, server=None, table_size=10):
         self.server = get_server(server, client_type="vue3")
         self.ui = self._build_ui()
 
+    def done(self):
+        print("We are done...")
+
     def _build_ui(self):
         with SinglePageLayout(self.server, full_height=True) as layout:
             with layout.toolbar.clear() as toolbar:
@@ -21,7 +24,8 @@ def _build_ui(self):
 
             with layout.content:
                 with vuetify3.VStepper(
-                    items=("steps", [f"Step {i+1}" for i in range(NB_STEPS)])
+                    v_model=("current_step", 0),
+                    items=("steps", [f"Step {i+1}" for i in range(NB_STEPS)]),
                 ):
                     with vuetify3.Template(raw_attrs=["v-slot:item.1"]):
                         with vuetify3.VCard(title="Step one", flat=True):
@@ -39,6 +43,26 @@ def _build_ui(self):
                                     f"You are getting close {i}/{NB_STEPS}"
                                 )
 
+                    # Custom Actions
+                    with vuetify3.Template(raw_attrs=['v-slot:actions="{prev, next}"']):
+                        with vuetify3.VCardActions():
+                            vuetify3.VBtn(
+                                "Previous",
+                                disabled=("current_step === 1",),
+                                click="prev",
+                            )
+                            vuetify3.VSpacer()
+                            vuetify3.VBtn(
+                                "Next",
+                                v_show=f"current_step < {NB_STEPS}",
+                                click="next",
+                            )
+                            vuetify3.VBtn(
+                                "Finish",
+                                v_show=f"current_step === {NB_STEPS}",
+                                click=self.done,
+                            )
+
             return layout