Display

At a glance

Image :: struct {...}
Pixel :: [4]u8
chips :: proc{chips_index, chips_enum}
avatar :: proc(name: string, large := false)
badge :: proc(label: string, tone := Tone.Default, dot := false)
callout :: proc(tone := Tone.Info, title := "") -> bool
chip :: proc(label: string, selected: bool, disabled := false) -> bool
chips_enum :: proc(selected: $E, labels: [E]string) -> (E, bool) where intrinsics.type_is_enum(E)
chips_index :: proc(selected: int, labels: []string) -> (int, bool)
empty_state :: proc(title: string, text: string) -> bool
image :: proc(img: Image, width: f32 = 0, height: f32 = 0)
progress :: proc(value: f32, tone := Tone.Primary, color: Maybe(Color) = nil, thin := false)
spinner :: proc()
stat :: proc(label, value: string, note := "", delta := "", delta_tone := Tone.Default, large := false)
text :: proc(s: string, style := TextStyle.Body, tone := Tone.Default, ellipsis := false)

Types

Image

Image :: struct {
  handle:        rawptr,
  width, height: int,
}

Pixel data and backend handle of an image. Create it after the window opened (in init).

Field	Type	Notes
`handle`	`rawptr`
`width`	`int`
`height`	`int`

Source: kiln/display.odin:231

Pixel

Pixel :: [4]u8

One RGBA pixel.

Source: kiln/display.odin:237

Procedure groups

chips

chips :: proc{chips_index, chips_enum}

A single choice from chips that wrap into lines (a flow).

Calls one of these, depending on the argument types:

chips_index proc(selected: int, labels: []string) -> (int, bool)
chips_enum proc(selected: $E, labels: [E]string) -> (E, bool) where intrinsics.type_is_enum(E)

Source: kiln/extras.odin:110

Procedures

avatar

avatar :: proc(name: string, large := false)

A circle with the initials of name; its color is derived from the name.

Argument	Type	Default
`name`	`string`	required
`large`	`bool`	`false`

Source: kiln/display.odin:126

badge

badge :: proc(label: string, tone := Tone.Default, dot := false)

A small pill for status and counts. dot adds a leading circle (e.g. online status).

kiln.badge("Neu", .Primary)
kiln.badge("Online", .Success, dot = true)

Argument	Type	Default
`label`	`string`	required
`tone`	`Tone`	`Tone.Default`
`dot`	`bool`	`false`

Source: kiln/display.odin:89

callout

callout :: proc(tone := Tone.Info, title := "") -> bool

A tinted box with an accent bar on the left for messages in the page (errors, hints, “connected”). The block holds text and buttons:

if kiln.callout(.Danger, "Konnte nicht laden") {
    kiln.text(m.error)
    if kiln.button("Nochmal", .Secondary) {append(out, Retry{})}
}

Argument	Type	Default
`tone`	`Tone`	`Tone.Info`
`title`	`string`	`""`

Returns	Type
#0	`bool`

Source: kiln/extras.odin:16

chip

chip :: proc(label: string, selected: bool, disabled := false) -> bool

A pill that toggles, e.g. a filter. Returns true when clicked; the caller flips selected:

if kiln.chip("Nur offene", m.only_open) {append(out, Toggle_Open{})}

Argument	Type	Default
`label`	`string`	required
`selected`	`bool`	required
`disabled`	`bool`	`false`

Returns	Type
#0	`bool`

Source: kiln/extras.odin:70

chips_enum

chips_enum :: proc(selected: $E, labels: [E]string) -> (E, bool) where intrinsics.type_is_enum(E)

Argument	Type	Default
`selected`	`$E`	required
`labels`	`[E]string`	required

Returns	Type
#0	`E`
#1	`bool`

Source: kiln/extras.odin:127

chips_index

chips_index :: proc(selected: int, labels: []string) -> (int, bool)

Argument	Type	Default
`selected`	`int`	required
`labels`	`[]string`	required

Returns	Type
#0	`int`
#1	`bool`

Source: kiln/extras.odin:115

empty_state

empty_state :: proc(title: string, text: string) -> bool

A centered, muted message for an empty list or page; the block can hold an action button:

if kiln.empty_state("Keine Aufgaben", "Lege oben die erste an.") {
    if kiln.button("Beispiele laden", .Secondary) {append(out, Load_Examples{})}
}

Argument	Type	Default
`title`	`string`	required
`text`	`string`	required

Returns	Type
#0	`bool`

Source: kiln/extras.odin:42

image

image :: proc(img: Image, width: f32 = 0, height: f32 = 0)

An image (see create_image / load_image). Without a size it fills the available width and keeps its aspect ratio; with one of width / height (units) the other one follows.

Argument	Type	Default
`img`	`Image`	required
`width`	`f32`	`0`
`height`	`f32`	`0`

Source: kiln/display.odin:207

progress

progress :: proc(value: f32, tone := Tone.Primary, color: Maybe(Color) = nil, thin := false)

A progress bar, value in [0, 1]. The bar follows changes smoothly. color overrides the tone (e.g. a category color from chart_color), thin halves the height for dense lists.

Argument	Type	Default
`value`	`f32`	required
`tone`	`Tone`	`Tone.Primary`
`color`	`Maybe(Color)`	`nil`
`thin`	`bool`	`false`

Source: kiln/display.odin:159

spinner

spinner :: proc()

A loading indicator: three dots that pulse one after another.

Source: kiln/display.odin:184

stat

stat :: proc(
  label, value: string,
  note := "",
  delta := "",
  delta_tone := Tone.Default,
  large := false,
)

A key figure: a caption, the value, and optionally a change badge and a note. Fits into grid cells:

kiln.stat("Bildschirmzeit", "5h 8m", delta = "↓ 12 %", delta_tone = .Success, large = true)

Argument	Type	Default
`label`	`string`	required
`value`	`string`	required
`note`	`string`	`""`
`delta`	`string`	`""`
`delta_tone`	`Tone`	`Tone.Default`
`large`	`bool`	`false`

Source: kiln/extras.odin:137

text

text :: proc(s: string, style := TextStyle.Body, tone := Tone.Default, ellipsis := false)

Text in a style and tone. It wraps at word boundaries when the container is too narrow; with ellipsis it stays on one line and is cut with ”…” instead (the full text then shows as tooltip).

kiln.text("Einstellungen", .Title)
kiln.text("Zuletzt geändert vor 3 Minuten", .Caption, .Muted)
kiln.text(window.title, ellipsis = true)

Argument	Type	Default
`s`	`string`	required
`style`	`TextStyle`	`TextStyle.Body`
`tone`	`Tone`	`Tone.Default`
`ellipsis`	`bool`	`false`

Source: kiln/display.odin:18