TiddlyWiki5/editions/tw5.com/tiddlers/macros/TabsMacro.tid

caption: tabs
created: 20131228162203521
modified: 20240627201724476
tags: Macros [[Core Macros]]
title: tabs Macro
type: text/vnd.tiddlywiki

The <<.def tabs>> [[macro|Macros]] presents a [[selection of tiddlers|Title Selection]] as a set of tabs that the user can switch between.

The tabs display the <<.field caption>> field of a tiddler if it has one, or the tiddler's title otherwise. If specified, the tabs display the <<.field 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 <<.param class>> parameter to <<.value tc-vertical>>.

!! Parameters

;tabsList
: A [[filter|Filters]] selecting which tiddlers to include
;default
: The title of the tiddler whose tab is to be selected by default, if the [[state tiddler|StateMechanism]] doesn't exist. The state tiddler takes precedence over this setting
;state
: The prefix for the title of a [[state tiddler|StateMechanism]] for noting the currently selected tab, defaulting to `$:/state/tab`. It is recommended that this be a [[system tiddler|SystemTiddlers]]
;class
: Additional [[CSS|Cascading Style Sheets]] 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|TemplateTiddlers]] for transcluding the content of the selected tab
;buttonTemplate
: Optionally, the title of a tiddler to use as a [[template|TemplateTiddlers]] 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 <<.var currentTab>> variable and the `currentTiddler` variable from outside the tabs macro is available in the <<.var 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 <<.var currentTab>> variable.

The <<.vlink currentTiddler>> variable is not affected by the <<.var tabs>> macro. This can put you in trouble if the list of tabs includes tiddlers that depend on the value of the <<.vlink currentTiddler>>, for example tiddlers listing children based on its own name. To overcome this problem you can make use of the <<.vlink currentTab>> variable, which can be used in a [[TemplateTiddler|TemplateTiddlers]] such as the following:

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

<<.macro-examples "tabs">>
Translation of the TabsMacro and related samples for the fr-FR edition. While we are at it, propose an addendum at the end of the TabsMacro documentation 2014-12-11 14:24:01 +00:00			`caption: tabs`
Docs update Hopefully fixing #309 2013-12-28 17:57:11 +00:00			`created: 20131228162203521`
Docs: Make currentTab variable tiddler, link from it to tabs Macro (#8310) 2024-06-29 12:24:26 +00:00			`modified: 20240627201724476`
Overhaul the macro and variable documentation #1519 2015-02-24 16:41:16 +00:00			`tags: Macros [[Core Macros]]`
			`title: tabs Macro`
Docs update Hopefully fixing #309 2013-12-28 17:57:11 +00:00			`type: text/vnd.tiddlywiki`
tabs-macro: improve info about the "default" parameter (#5904) 2021-07-30 15:19:23 +00:00
Overhaul the macro and variable documentation #1519 2015-02-24 16:41:16 +00:00			`The <<.def tabs>> [[macro\|Macros]] presents a [[selection of tiddlers\|Title Selection]] as a set of tabs that the user can switch between.`
Sort out the docs for the tabs macro 2013-11-21 17:32:24 +00:00
Added a paragraph describing the use of tooltips 2015-12-23 20:28:52 +00:00			`The tabs display the <<.field caption>> field of a tiddler if it has one, or the tiddler's title otherwise. If specified, the tabs display the <<.field tooltip>> field of a tiddler as the respective button tooltip.`
Refactor vertical tabs for reusability In practice, if you look at TabsMacro you’ll see that the width of the tab content is wrong, and will usually overflow the container. Next step is to fix that by using flexbox… 2014-05-11 17:47:14 +00:00
Overhaul the macro and variable documentation #1519 2015-02-24 16:41:16 +00:00			`By default the tabs are arranged horizontally above the content. To get vertical tabs, set the <<.param class>> parameter to <<.value tc-vertical>>.`
Sort out the docs for the tabs macro 2013-11-21 17:32:24 +00:00
Overhaul the macro and variable documentation #1519 2015-02-24 16:41:16 +00:00			`!! Parameters`
Sort out the docs for the tabs macro 2013-11-21 17:32:24 +00:00
Overhaul the macro and variable documentation #1519 2015-02-24 16:41:16 +00:00			`;tabsList`
			`: A [[filter\|Filters]] selecting which tiddlers to include`
			`;default`
tabs-macro: improve info about the "default" parameter (#5904) 2021-07-30 15:19:23 +00:00			`: The title of the tiddler whose tab is to be selected by default, if the [[state tiddler\|StateMechanism]] doesn't exist. The state tiddler takes precedence over this setting`
Overhaul the macro and variable documentation #1519 2015-02-24 16:41:16 +00:00			`;state`
			: The prefix for the title of a [[state tiddler\|StateMechanism]] for noting the currently selected tab, defaulting to `$:/state/tab`. It is recommended that this be a [[system tiddler\|SystemTiddlers]]
			`;class`
			: Additional [[CSS\|Cascading Style Sheets]] 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\|TemplateTiddlers]] for transcluding the content of the selected tab`
Add buttonTemplate parameter to tabs macro 2017-11-13 13:56:13 +00:00			`;buttonTemplate`
			`: Optionally, the title of a tiddler to use as a [[template\|TemplateTiddlers]] for transcluding the content of the button for the selected tab`
Add support for retaining tab content Fixes #2031 2018-04-08 08:47:57 +00:00			`;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)`
update TabsMacro.tid with "actions" and "explicitState" attribute (#4902) 2020-10-23 18:33:46 +00:00			`;actions`
Update docs for tabs macro (#5722) 2021-05-25 21:16:02 +00:00			: 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 <<.var currentTab>> variable and the `currentTiddler` variable from outside the tabs macro is available in the <<.var save-currentTiddler>>
update TabsMacro.tid with "actions" and "explicitState" attribute (#4902) 2020-10-23 18:33:46 +00:00			`;explicitState`
			`: Optionally, an explicit state title can be specified. It will be preferred over the internally computed (qualified) state title`
Fix problem with tabs macro changing current tiddler The problem was introduced in e18d8a88661a1c2caa1b722841747c75ca6af437 2014-07-12 08:07:51 +00:00
Overhaul the macro and variable documentation #1519 2015-02-24 16:41:16 +00:00			`Within the template, the title of the selected tab is available in the <<.var currentTab>> variable.`
Sort out the docs for the tabs macro 2013-11-21 17:32:24 +00:00
Docs: Make currentTab variable tiddler, link from it to tabs Macro (#8310) 2024-06-29 12:24:26 +00:00			`The <<.vlink currentTiddler>> variable is not affected by the <<.var tabs>> macro. This can put you in trouble if the list of tabs includes tiddlers that depend on the value of the <<.vlink currentTiddler>>, for example tiddlers listing children based on its own name. To overcome this problem you can make use of the <<.vlink currentTab>> variable, which can be used in a [[TemplateTiddler\|TemplateTiddlers]] such as the following:`
Updated tabs macro documentation (#2697) Adding how to deal with transclusions inside the tabs itself. It is not weird that you want use tabs on a set of tiddlers that transclude other tiddlers using their own title. If you don't understand well the consequences of of what the sentence `currentTiddler variable is not affected...` this can be quite frustrating. 2017-01-04 21:40:11 +00:00
			```
			`<$tiddler tiddler=<<currentTab>>>`
			`<$transclude mode="block" />`
			`</$tiddler>`
TabsMacro.tid - remove character that causes problem (#2856) The example link at bottom was not visible in correct way 2017-06-29 16:04:38 +00:00			```
Sort out the docs for the tabs macro 2013-11-21 17:32:24 +00:00
Overhaul the macro and variable documentation #1519 2015-02-24 16:41:16 +00:00			`<<.macro-examples "tabs">>`