Panel

Wire name panel

A container. It holds children, optionally lays them out, and optionally draws a border around them. Almost every window has one immediately inside it, and almost every example on this wiki starts with one.

p=new panel layout=vbox spacing=0 children={
	new label caption="Name:"
	new textinput placeholder="…"
}

---

Properties

Property	Type	Default	Meaning
border	flag	false	Draw a border around the panel
border_style	single | double | rounded | heavy | ascii	—	Border line style
fixed_width	int	—	Fixed panel width in units
layout	vbox | hbox | none	—	Child layout manager
spacing	int	—	Spacing between laid-out children

Plus the common properties.

Events

panel emits no events.

A panel is structure, not a control. It takes no focus and reports nothing; its children do that.

Two ordering rules

Properties apply in the order they are written, and two of a panel's interact.

layout before spacing. Spacing belongs to the layout manager, so there has to be one first. Out of order it is a plain error, not a silent no-op:

new panel spacing=1 layout=vbox
  -> spacing: set layout before spacing

children before anything that indexes them. children={…} is a panel property like any other and applies in written order — see ListView for the effect on a trinket that has a selected.

Without layout, nothing is laid out

A panel has no layout manager until you give it one. A child added to a panel with no layout= keeps the bounds it had, which is nothing:

new panel children={ new label caption="x" }   # child ends up 0×0 at 0,0

layout=none is a supported choice, for a panel whose children are positioned some other way. It is also what an omitted layout= produces, so a panel whose children do not appear is usually missing one.

layout	Children are
vbox	stacked top to bottom
hbox	placed left to right
none	left where they are — the same as omitting layout

Flex and grid exist in the layout engine but have no wire spelling yet; layout=grid is rejected with a message saying so.

Sizing the children

The layout reads each child's own stretch and align, so a row of controls with one stretched item is the usual shape:

p=new panel layout=hbox spacing=1 children={
	new label caption="Search:"
	new textinput stretch=1
	new button caption="Go"
}

spacing is in units, so spacing=1 is an eighth of a column at the default denomination — for a gap of one character use spacing=8, or re-denominate the panel.

fixed_width pins the panel's own width and takes it out of the parent's stretch arithmetic.

A layout you build more than once belongs in a template, which can carry the panel's properties and its children together:

template FormRow=panel layout=hbox spacing=8 children={
	lbl=new label caption="?"
	input=new textinput stretch=1
}
name=new FormRow
email=new FormRow

Each instance can then override what differs — name.lbl and email.lbl are reachable by surfacing them.

Borders

border draws a frame, and border_style picks the line. The frame is drawn inside the panel's bounds and insets the children by a cell on each side, so a bordered panel needs a cell more room in each direction than its contents require.

border_style=ascii draws the frame from plain ASCII, for output that may reach something without box-drawing characters. The rest — single double rounded heavy — need a font that carries them.

See also

Common Properties — stretch, align, units · Splitter — two panes the user can resize · ScrollArea — a container larger than its window