added stepper example

BasicExamples/Stepper/Project.toml

@@ -0,0 +1,7 @@
+[deps]
+GenieFramework = "a59fdf5c-6bf0-4f5d-949c-a137c9e2f353"
+Stipple = "4acbeb90-81a0-11ea-1966-bdaff8155998"
+StippleUI = "a3c5d34a-b254-4859-a8fa-b86abb7e84a3"
+
+[compat]
+GenieFramework = "1.19.0"

BasicExamples/Stepper/app.jl

@@ -0,0 +1,40 @@
+module App
+
+using GenieFramework
+
+@genietools
+
+@app begin
+  @out step = "1"
+end
+
+function ui()
+  [
+    stepper(:step, ref="stepper",color="primary", animated=true,
+      [
+        qstep("For each ad campaign that you create, you can control how much you're willing to
+        spend on clicks and conversions, which networks and geographical locations you want
+        your ads to show on, and more.", name! ="1", title="Select campaign settings",
+        icon="settings", done! ="step > 1"),
+        qstep("An ad group contains one or more ads which target a shared set of keywords.",
+           name! = "2", title="Create an ad group", caption="Optional", icon="create_new_folder", done! = "step > 2"),
+        qstep("This step won't show up because it is disabled.",
+           name! ="3",
+           title="Ad template",
+           icon="assignment",
+           disable=true,
+        )
+      ]
+    ),
+    template("", "v-slot:navigation",
+      steppernavigation([
+        btn(color="primary", label! ="step === 3 ? 'Finish' : 'Continue'", @click("$refs.stepper.next()")),
+        btn(@iif("step > 1"), flat = true, color="primary", label="Back", class="q-ml-sm", @click("$refs.stepper.previous()") ),
+      ])
+    )
+  ]
+end
+
+@page("/", ui)
+
+end