Log inGet started
World

Builtin Library

Branchmain
Branchesmainpublish
Commitdd348ac6c3

README.md

_rowCanvas

Shared selectable-row factory used by Z.radioGroup and Z.selectableList. Each row is a single focusable canvas widget that draws its background + optional radio glyph + label in widget-local coords. Because the whole row is one canvas (not a composition of glyph-canvas + label + container with click handlers), Tab cycles row-by-row naturally via egui's focus chain, click commits selection via the canvas's onClick prop, and arrow keys reach the parent group's nav handler via the canvas's onKey prop. Underscore prefix marks it as a package-internal helper — not exported from zui.widget and not part of the Z.* surface.

Exports

This module returns the row factory function directly. There is no returned table.

  • rowCanvas(opts: RowOpts?) -> Node — build a selectable-row canvas node.

Types:

  • RowOpts = { groupId?: string, index?: number, label?: string, selected?: boolean, kind?: "radio" | "option", width?: number, height?: number, bg?: string, fg?: string, selectedBg?: string, selectedFg?: string }
  • Node = { [string]: any } — opaque canvas widget node.

Usage

local rowCanvas = require("@builtin::modules.zui.widget._rowCanvas")

return Z.vbox{
    rowCanvas{ groupId = "themes", index = 1, label = "Dark",  selected = true,  kind = "radio" },
    rowCanvas{ groupId = "themes", index = 2, label = "Light", selected = false, kind = "radio" },
}

Notes

  • Click commits selection via onClick = <groupId>:select:<index>; the parent group's callback subscribes to that event.
  • Arrow keys raise onKey = <groupId>:nav so the parent group handles keyboard navigation in one place.
  • The whole row is a single canvas — focus moves row-by-row through egui's focus chain naturally (no manual focus management needed).
  • DOM mirror sees <canvas role="radio"|"option" aria-selected="true|false"> via the generic role + aria* pass-through on canvas.
  • Defaults: 200 × 22 row, "#00000000" bg, "#dcdcdc" fg, selected "#3a4a64" bg + "#ffffff" fg.