lattice/docs/widgets.md
2026-07-10 01:43:19 -04:00

40 lines
1.7 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Widgets
All widgets live in `xyz.meowing.lattice.ui.widget`, extend `Element`, take
their colors from [`Theme`](theming.md) by default, and report changes
through `onValueChange { value -> }`.
| Widget | Value pushed | Notes |
| --- | --- | --- |
| `Button` | — | `onClick`; text/hover/pressed colors, fluent styling |
| `Switch` | `Boolean` | animated thumb; `setEnabled(value, animated, silent)` |
| `CheckBox` | `Boolean` | SVG checkmark; `setChecked(value, animated, silent)` |
| `Slider` | `Float` | `minValue`/`maxValue`/`step`, draggable + click-to-set |
| `Dropdown` | `Int` (index) | floating popup list; `options: List<String>` |
| `TextInput` | `String` | caret, selection, clipboard (ctrl-C/X/V), placeholder |
| `NumberInput` | number as `String` | `allowDecimals`, `allowNegative` |
| `Keybind` | `Int` (key code) | click, then press a key; ESC clears |
| `ColorPicker` | `java.awt.Color` | floating HSB panel with alpha + hex field |
Typical usage:
```kotlin
Slider(value = 50f, minValue = 0f, maxValue = 100f, step = 1f)
.onValueChange { v -> config.volume = v as Float }
.childOf(row)
Dropdown(options = listOf("A", "B", "C"))
.setSizing(150f, Size.Pixels, 26f, Size.Pixels)
.onValueChange { i -> config.mode = i as Int }
.childOf(row)
```
`onValueChange` payloads are typed `Any`; cast to the widget's value type
from the table above.
Widgets set sensible default sizes in their constructors (e.g. `Slider`
200×24, `CheckBox` 20×20); override with `setSizing`. `TextInput` and
`NumberInput` need explicit sizing.
Composite widgets expose their parts (`Button.background`,
`Button.innerText`, `Slider.thumb`, …) for fine-grained styling.