The tabs macro presents a selection of tiddlers as a set of tabs that the user can switch between.

The tabs display the caption field of a tiddler if it has one, or the tiddler's title otherwise. If specified, the tabs display the tooltip field of a tiddler as the respective button tooltip.

By default the tabs are arranged horizontally above the content. To get vertical tabs, set the class parameter to tc-vertical.

Parameters

tabsList

A filter selecting which tiddlers to include

default

The title of the tiddler whose tab is to be selected by default, if the state tiddler doesn't exist. The state tiddler takes precedence over this setting

state

The prefix for the title of a state tiddler for noting the currently selected tab, defaulting to $:/state/tab. It is recommended that this be a system tiddler

class

Additional CSS classes for the generated div elements. Multiple classes can be separated with spaces

template

Optionally, the title of a tiddler to use as a template for transcluding the content of the selected tab

buttonTemplate

Optionally, the title of a tiddler to use as a template for transcluding the content of the button for the selected tab

retain

Optionally, "yes" specifies that the content of the tabs should be retained when switching to another tab, avoiding re-rendering it (this can be useful to avoid video or audio sources unexpectedly resetting)

actions

Optionally, actions can be specified that are triggered when changing a tab. Within the actions, the title of the selected tab is available in the currentTab variable and the currentTiddler variable from outside the tabs macro is available in the save-currentTiddler

explicitState

Optionally, an explicit state title can be specified. It will be preferred over the internally computed (qualified) state title

Within the template, the title of the selected tab is available in the currentTab variable.

The currentTiddler variable is not affected by the tabs macro. This can put you in trouble if the list of tabs includes tiddlers that depend on the value of the currentTiddler, for example tiddlers listing children based on its own name. To overcome this problem you can use a TemplateTiddler like the following:

<$tiddler tiddler=<<currentTab>>>
<$transclude mode="block" />
</$tiddler>

Examples