Widgets

All of them follow the rules: value widgets return (new_value, changed), buttons return bool, menus (index, ok). Click a name for the full argument list.

Text and display

widget	example
`text`	`text(s, .Caption, .Muted)`, `text(title, ellipsis = true)`
`icon`	`icon(FOLDER, .Title)`
`badge`	`badge("Neu", .Primary)`, `badge("Online", .Success, dot = true)`
`avatar`	`avatar(name)`
`stat`	`stat("Umsatz", "1840 €", delta = "+4 %")`
`progress`	`progress(v, color = c, thin = true)`
`spinner`	`spinner()`
`callout`	`if kiln.callout(.Danger, "Fehler") { ... }`
`empty_state`	`if kiln.empty_state(title, text) { ... }`
`image`	`image(img)`

Buttons and values

widget	example
`button`	`button("OK")`, `button(kiln.ICON_MENU, .Ghost)`, `button("Suchen", icon = kiln.ICON_SEARCH)`, `button("Entfernen", .Ghost, tone = .Danger)`
`chip`	`chip("Offen", m.open)`
`checkbox`	`checkbox(m.notify, "Benachrichtigungen")`
`toggle`	`toggle(m.dark, "Dunkel")`
`radio`	`radio(m.size, Size.Large, "Groß")`
`slider`	`slider(m.v, 0, 100)`
`text_field`	`text_field(m.s, "Name")`, `text_field(m.pw, "Passwort", password = true)`

Choices

Choice widgets take either a slice of labels and return an index, or an enum-indexed array and return the enum.

widget	example
`tabs`	`tabs(m.tab, TAB_NAMES)`
`segmented`	`segmented(m.range, RANGES, fill = true)`
`nav`	`nav(m.page, PAGES, collapsed = true)`
`select`	`select(m.i, OPTIONS[:])`
`chips`	`chips(m.i, LABELS[:])`

Dates

widget	example
`date_field`	`date_field(m.due, min = kiln.today())`
`calendar`	`calendar(m.day)`

Plus date math: date_add_days, date_add_months, date_diff, date_parse, date_format, … see Dates.

Data

widget	example
`table`	`table(m.sel, COLUMNS[:], rows)`
`tree`	`tree(m.sel, nodes)`

Charts

widget	example
`bar_chart`	`bar_chart(values, labels, format = f, highlight = i)`
`timeline`	`timeline(rows, ticks)`
`legend`	`legend(items)`
`swatch`	`swatch(color)`

chart_color(i) gives the i-th categorical color of the theme.

Overlays

widget	example
`dialog`	`if kiln.dialog("name", "Titel") { ... }`
`drawer`	`if kiln.drawer("nav") { ... }`
`show` / `hide`	`show("name")`, `hide()`
`menu`	`menu(kiln.ICON_MORE, ITEMS[:])`
`context_menu`	`context_menu(ITEMS[:])` after the item
`tooltip`	`tooltip("Strg+S")` after the item
`toast`	`toast("Gespeichert", .Success)`

A dialog, the way it is meant to be used:

if kiln.button("Löschen", .Danger) {kiln.show("confirm")}

if kiln.dialog("confirm", "Eintrag löschen?") {
  kiln.text("Das kann nicht rückgängig gemacht werden.")
  if kiln.actions() {
    if kiln.button("Abbrechen", .Ghost) {kiln.hide()}
    if kiln.button("Löschen", .Danger) {append(out, Delete{}); kiln.hide()}
  }
}

Everything at once

The “Komponenten” page of the example shows every widget once:

odin run example -collection:lib=. -define:START_PAGE=5