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

caption: tabs
created: 20131228162203521
modified: 20150221211706000
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
;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

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 use a [[TemplateTiddler|TemplateTiddlers]] like 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`
Overhaul the macro and variable documentation #1519 2015-02-24 16:41:16 +00:00			`modified: 20150221211706000`
			`tags: Macros [[Core Macros]]`
			`title: tabs Macro`
Docs update Hopefully fixing #309 2013-12-28 17:57:11 +00:00			`type: text/vnd.tiddlywiki`
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			`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`
			`: The title of the tiddler whose tab is to be selected by default`
			`;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`
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
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			`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 use a [[TemplateTiddler\|TemplateTiddlers]] like the following:`

			```
			`<$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">>`