THE COMPONENT GALLERY
A collection of useful little things. Try them, change the theme, and take a look at the Volang behind them.
Get to know the framework →Actions with clear intent and a little room to breathe.
kit.Button(kit.ButtonProps{
OnPress: func() { count.Set(count.Get() + 1) },
}, ui.Text("Make it happen"))Native inputs, useful labels, and familiar keyboard behavior.
A little personal touch goes a long way.
kit.Field("name", "Your name", "A personal touch.",
ui.Element("input").Attr("value", name.Get()).
On("input", func(e ui.Event) { name.Set(e.Value) }))Quiet feedback that keeps people in the picture.
kit.Progress(kit.ProgressProps{
ID: "progress", Label: "A little progress",
Max: 100, Value: 35, Indeterminate: busy.Get(),
})Native modal layers, keyboard navigation, and a graceful way back.
Try Tab, Shift + Tab, and Escape.
kit.Dialog(kit.DialogProps{
ID: "idea", Title: "A new idea", Open: readOpen,
OnOpenChange: func(value bool) { open.Set(value) },
}, content)A timely note, with a little space to read and respond.
A little reassurance, without losing your place.
notes := kit.NewToasts(scope, "notes", kit.ToastOptions{})
show := func() {
notes.Show(kit.ToastMessage{Key: "saved", Title: "Your idea is saved"})
}
kit.ToastRegion(kit.ToastRegionProps{
ID: "notes", Queue: notes, ReturnFocus: trigger,
})Related views, with a clear path between them.
One idea, a few different perspectives. Use the arrow keys to find your way around.
Your words stay here while you explore the other tabs.
Each panel keeps its own state. Switching tabs leaves your work just where you put it.
kit.Tabs(kit.TabsProps{
ID: "idea", Label: "Your idea", Value: readSelected,
Items: items, OnChange: func(key string) { selected.Set(key) },
})A little movement, with time to change your mind.
Bring it back before it fades to keep your thought. Once it’s gone, there’s room for a fresh start.
kit.Presence(kit.PresenceProps{
ID: "thought", Visible: readVisible, ReturnFocus: trigger,
}, content)Clear feedback, thoughtful defaults, and a safe place for unfinished thoughts.
form := forms.Use(scope, "idea", forms.Options{
Initial: forms.Values{"title": []string{""}},
Validate: validateIdea,
})
field := form.Input("title", ui.Element("input"))Useful details, ready when you need them.
Start with one useful detail. You can leave a few sections open while you find your way.
Close this section and come back to it.
kit.Accordion(kit.AccordionProps{
ID: "ideas", Items: items, Expanded: readExpanded,
Multiple: true, OnChange: updateExpanded,
})A little space beside the action, with a familiar way back.
Untitled idea
kit.Popover(kit.PopoverProps{
ID: "settings", Label: "Quick settings",
Open: readOpen, OnOpenChange: setOpen,
}, content)Familiar actions, one small menu away.
A few useful next steps for your idea.
kit.Menu(kit.MenuProps{
ID: "actions", Label: "Idea actions", Items: items,
Open: readOpen, OnOpenChange: setOpen,
OnAction: handleAction,
})Find a familiar place, or leave room for a new one.
A suggestion can be the start of something.
kit.Combobox(kit.ComboboxProps{
ID: "place", Label: "Your next stop", Options: places,
Value: readPlace, OnChange: setPlace,
})Familiar choices, with room for your own preferences.
kit.Select(kit.SelectProps{
ID: "language", Name: "language", Label: "Language",
Placeholder: "Choose a language", Options: languages,
})A thousand small thoughts, with a comfortable place to browse.
Explore with the arrow keys, then press Space to choose.
A place to begin: A quiet morning · 1
kit.Listbox(kit.ListboxProps{
ID: "library", Label: "Your library", Items: library,
Selected: readSelected, OnSelectionChange: setSelected,
Virtual: true, RowHeight: 40, Height: 208,
})A few ideas to sort through, with space for your notes.
| Your note | ||
|---|---|---|
| A day outdoors | 15 min | |
| A handwritten letter | 25 min | |
| A little sketch | 10 min |
Page 1 of 3. Your notes stay with each thought.
kit.Table(kit.TableProps{
Caption: "Ideas for your day", Columns: columns, Rows: rows,
Sort: readSort, OnSortChange: sortItems,
})
kit.Pagination(kit.PaginationProps{
Page: readPage, PageCount: pages, OnChange: setPage,
})