TabTrinket

Wire names tabs · tab

A strip of tabs over a stack of pages. One page is visible at a time and the strip chooses which.

t=new tabs children={
	new tab caption="General"  children={ new panel layout=vbox children={ … } }
	new tab caption="Advanced" children={ new panel layout=vbox children={ … } }
}

---

Properties

tabs

Property	Type	Default	Meaning
background	color	—	Tab body background color.
closable	flag	false	Show per-tab close buttons.
movable	flag	false	Allow reordering tabs by drag.
position	top | bottom | left | right	—	Tab strip edge.
selected	int	0	Active tab index.

Plus the common properties.

tab

Property	Type	Default	Meaning
caption	string	—	Tab label text.

tab is a virtual type — a page of the strip rather than a trinket placed on its own — so it takes no common properties and has no identity of its own.

Events

change — A different tab was selected.

Field	Type	Meaning
trinket	uint	The tab strip's object ID.
selected	int	Index of the newly selected tab.

change is the strip's, not the page's. Which page became visible is the index; reach the page itself by surfacing a key inside it.

One content trinket per tab

A tab holds exactly one child, the same rule a Window follows. Two is an error rather than a silent drop:

new tab caption="A" children={ new label caption="a"; new label caption="b" }
  ->  tab: only one content trinket (wrap several in a panel)

So in practice almost every tab's child is a Panel:

new tab caption="General" children={
	new panel layout=vbox spacing=8 children={
		new label caption="Name:"
		new textinput
	}
}

Put selected after children

The same ordering trap as ListView, and just as silent:

new tabs selected=2 children={new tab caption="A" children={new label caption="a"}; new tab caption="B" children={new label caption="b"}; new tab caption="C" children={new label caption="c"}}
  ->  selected = 0

new tabs children={new tab caption="A" children={new label caption="a"}; new tab caption="B" children={new label caption="b"}; new tab caption="C" children={new label caption="c"}} selected=2
  ->  selected = 2

Note the default here is 0, not -1 — a tab strip always has a current tab once it has any tabs at all. A template carrying the tabs settles the ordering for good.

Reordering and closing

movable lets the user drag tabs into a different order. closable puts a close control on each tab.

Both change what the user can do to the strip, and neither raises an event of its own — a close is a structural change, so an application that needs to know a page went away should watch the page rather than the strip.

background is not bg

background paints the tab body and is the color the strip reports to its children, so a page inherits it. The common bg is a style override on the strip itself.

The word default clears background back to inherited.

Keys and mouse

	Does
Left Right	Move to the previous / next tab.
Click a tab	Select it.
Drag a tab	Reorder, with movable.

The strip takes focus by Tab only — it is TabFocus, not click-focus, so clicking a tab selects the page without stealing the keyboard from whatever is inside it.

See also

Panel — what nearly every tab contains · ListView — the other index-selected trinket · Window · Common Properties