Select
The dropdown.Dropdown component in all styles: default and styled, optional, searchable, with info and disabled, plus dropdown.FromSlice as a drop-in for slices.

package main
import (
"fmt"
"go.wdy.de/nago/application"
"go.wdy.de/nago/presentation/core"
"go.wdy.de/nago/presentation/ui"
"go.wdy.de/nago/presentation/ui/dropdown"
"go.wdy.de/nago/web/vuejs"
)
type ID string
type Person struct {
ID ID
Vorname, Nachname string
}
func (p Person) Identity() ID {
return p.ID
}
func (p Person) String() string {
return fmt.Sprintf("%s %s", p.Vorname, p.Nachname)
}
var names = []string{"Baba", "Noah", "Ethan", "Olivia", "Isabella", "Jacob", "Ava", "Liam", "Logan", "Sophia", "Emily", "Michael", "Madison", "Matthew", "Jack", "Mia", "Hannah", "Ryan", "Abigail"}
func main() {
application.Configure(func(cfg *application.Configurator) {
cfg.SetApplicationID("de.worldiety.tutorial_89")
cfg.Serve(vuejs.Dist())
var persons []Person
for i, first := range names {
for j, second := range names {
persons = append(persons, Person{
ID: ID(fmt.Sprintf("%d-%d-%s-%s", i, j, first, second)),
Vorname: first,
Nachname: second,
})
}
}
selectOptions := make([]dropdown.Option[ID], 0, len(persons))
for i, person := range persons {
selectOptions = append(selectOptions, dropdown.Option[ID]{
Label: person.String(),
Description: "Description for " + person.String(),
Value: person.ID,
Disabled: i%10 == 0,
})
}
cfg.RootView(".", func(wnd core.Window) core.View {
personState := core.AutoState[ID](wnd).Init(func() ID {
return persons[4].ID
})
personState.Observe(func(newValue ID) {
fmt.Println("Select value changed: " + personState.Get())
})
return ui.VStack(
ui.Stack(
ui.VStack(
dropdown.Dropdown("Default (disabled)", selectOptions, personState.Get()).InputValue(personState).Disabled(true),
dropdown.Dropdown("Styled (disabled)", selectOptions, personState.Get()).InputValue(personState).StyledDropdown(true).Disabled(true),
dropdown.Dropdown("Default", selectOptions, personState.Get()).InputValue(personState),
dropdown.Dropdown("Default (optional)", selectOptions, personState.Get()).Optional(true).InputValue(personState),
dropdown.Dropdown("Styled", selectOptions, personState.Get()).InputValue(personState).StyledDropdown(true),
dropdown.Dropdown("Styled mit Suche", selectOptions, personState.Get()).InputValue(personState).StyledDropdown(true).Searchable(true),
dropdown.Dropdown("Styled mit Info", selectOptions, personState.Get()).InputValue(personState).StyledDropdown(true).DropdownInfo("Personen"),
).Gap(ui.L32).NoClip(true),
ui.VStack(
dropdown.Dropdown("Default (disabled)", selectOptions, personState.Get()).InputValue(personState).Disabled(true).Style(ui.TextFieldReduced),
dropdown.Dropdown("Styled (disabled)", selectOptions, personState.Get()).InputValue(personState).StyledDropdown(true).Disabled(true).Style(ui.TextFieldReduced),
dropdown.Dropdown("Default", selectOptions, personState.Get()).InputValue(personState).Style(ui.TextFieldReduced),
dropdown.Dropdown("Default (optional)", selectOptions, personState.Get()).Optional(true).InputValue(personState).Style(ui.TextFieldReduced),
dropdown.Dropdown("Styled", selectOptions, personState.Get()).InputValue(personState).StyledDropdown(true).Style(ui.TextFieldReduced),
dropdown.Dropdown("Styled mit Suche", selectOptions, personState.Get()).InputValue(personState).StyledDropdown(true).Searchable(true).Style(ui.TextFieldReduced),
dropdown.Dropdown("Styled mit Info", selectOptions, personState.Get()).InputValue(personState).StyledDropdown(true).DropdownInfo("Personen").Style(ui.TextFieldReduced),
).Gap(ui.L32).NoClip(true),
ui.VStack(
dropdown.Dropdown("Default (disabled)", selectOptions, personState.Get()).InputValue(personState).Disabled(true).Style(ui.TextFieldFilled),
dropdown.Dropdown("Styled (disabled)", selectOptions, personState.Get()).InputValue(personState).StyledDropdown(true).Disabled(true).Style(ui.TextFieldFilled),
dropdown.Dropdown("Default", selectOptions, personState.Get()).InputValue(personState).Style(ui.TextFieldFilled),
dropdown.Dropdown("Default (optional)", selectOptions, personState.Get()).Optional(true).InputValue(personState).Style(ui.TextFieldFilled),
dropdown.Dropdown("Styled", selectOptions, personState.Get()).InputValue(personState).StyledDropdown(true).Style(ui.TextFieldFilled),
dropdown.Dropdown("Styled mit Suche", selectOptions, personState.Get()).InputValue(personState).StyledDropdown(true).Searchable(true).Style(ui.TextFieldFilled),
dropdown.Dropdown("Styled mit Info", selectOptions, personState.Get()).InputValue(personState).StyledDropdown(true).DropdownInfo("Personen").Style(ui.TextFieldFilled),
).Gap(ui.L32).NoClip(true),
).Gap(ui.L64).NoClip(true),
ui.Stack(
ui.PrimaryButton(func() {
if wnd.Info().PrefersLight() {
wnd.SetColorScheme(core.Dark)
} else {
wnd.SetColorScheme(core.Light)
}
}).Title("Toggle theme"),
ui.PrimaryButton(func() {
fmt.Println(personState)
}).Title("print selected").Enabled(len(personState.Get()) > 0),
ui.SecondaryButton(func() {
wnd.Navigation().ForwardTo("picker-drop-in", nil)
}).Title("show picker-drop-in api"),
).Gap(ui.L16).Padding(ui.Padding{Top: ui.L32}).Border(ui.Border{TopWidth: ui.L1, TopColor: ui.M5}),
).Gap(ui.L32).Frame(ui.Frame{}.MatchScreen())
})
cfg.RootView("picker-drop-in", func(wnd core.Window) core.View {
personState := core.AutoState[[]Person](wnd).Init(func() []Person {
return []Person{persons[4]}
})
personState.Observe(func(newValue []Person) {
fmt.Println("Select value changed: ", personState.Get())
})
return ui.VStack(
dropdown.FromSlice("Person auswählen", persons, personState),
ui.PrimaryButton(func() {
fmt.Println(personState)
}).Title("print selected").Enabled(len(personState.Get()) > 0),
).
Gap(ui.L16).
Frame(ui.Frame{}.MatchScreen())
})
}).Run()
}
View on GitHub ↗
· run it with go run go.wdy.de/nago/example/cmd/tutorial-89-select@latest