Tab Elements

Another special feature of infoboxes is tabbing, invoked by the element arguments :tab and :tabdiv, which have special behaviours.

The :tabdiv is an element with two parts: a list of tabs, and a content container. The tab list will automatically populate with any defined tabs associated with the same tab group. The group may be defined with $tg=groupName, or it will default to a numerical index (number of existing groups plus one). This element follows the normal table rules and is placed wherever it is defined.

The :tab element does not follow normal table rules, and may be defined anywhere. Without an associated group, they will not be rendered. Their group is defined with $tg. Their key is defined $tk, and will default to a numerical index. The text of their label (which appears in the tabs list) may be defined with $tt, else their key will be displayed instead. The tab's content is rendered inside of the associated tabgroup's content div.

Notably, only the content of the currently active tab is displayed within the content div. This may be used to include multiple images that may be swapped between, for example.

But that's not all. Elements anywhere in the table (except for those above the group's nesting level) may be given the parameter $ta to associate them with a group and tab, separated with a period like so: $ta=group.tab. Those elements will then receive an attribute when active, which can be used to style them: in the included styles, associated elements without the active attribute are set to display: none.

A helpful feature when using tab associations is the force flag $f, which allows you to overload the table columns without disrupting the autofill behaviour. This could be used to swap out a cell based on tab state, like so: | !l = Label | !d {$f $ta=0.1} = One | !d {$f $ta=0.2} = Two

In that example, only one of the two data cells is visible at a time.

Any number of tabs and tabgroups may be defined. Each group tracks its state separately.

Tab states should persist between edits.

Note that if debounced render is enabled, tab buttons will not function during the debounce period (time between edit and update of element).