Skip to content

Stepper

The stepper.Stepper component, driven by back and next buttons.

Stepper

package main

import (
	_ "embed"
	"strconv"

	"go.wdy.de/nago/application"
	"go.wdy.de/nago/presentation/core"
	"go.wdy.de/nago/presentation/ui"
	"go.wdy.de/nago/presentation/ui/stepper"
	"go.wdy.de/nago/web/vuejs"
)

func main() {
	application.Configure(func(cfg *application.Configurator) {
		cfg.SetApplicationID("de.worldiety.tutorial_97")
		cfg.Serve(vuejs.Dist())

		cfg.RootView(".", func(wnd core.Window) core.View {
			state := core.StateOf[int](wnd, "stepperState")

			nextText := "Weiter >"
			if state.Get() >= 4 {
				nextText = "Fertig >"
			}

			return ui.VStack(
				ui.PrimaryButton(func() {
					if wnd.Info().PrefersLight() {
						wnd.SetColorScheme(core.Dark)
					} else {
						wnd.SetColorScheme(core.Light)
					}
				}).Title("Toggle theme"),
				ui.Text("Aktueller Step: "+strconv.Itoa(state.Get()+1)),
				stepper.Stepper(
					stepper.Step().Headline("Schritt 1").SupportingText("Einkaufsliste"),
					stepper.Step().Headline("Schritt 2").SupportingText("Einkaufen"),
					stepper.Step().Headline("Schritt 3").SupportingText("Zutaten schnibbeln"),
					stepper.Step().Headline("Schritt 4").SupportingText("Kochen"),
					stepper.Step().Headline("Schritt 5").SupportingText("Essen und freuen"),
				).InputValue(state),
				ui.Stack(
					ui.PrimaryButton(func() {
						state.Set(state.Get() - 1)
					}).Title("< Zurück").Disabled(state.Get() <= 0),
					ui.PrimaryButton(func() {
						state.Set(state.Get() + 1)
					}).Title(nextText).Disabled(state.Get() > 4),
				).Gap(ui.L8),
			).Gap(ui.L32).Frame(ui.Frame{}.MatchScreen())
		})

	}).Run()
}

View on GitHub ↗ · run it with go run go.wdy.de/nago/example/cmd/tutorial-97-stepper@latest