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

created: 20131228162203521
modified: 20140702113527667
tags: macros
title: TabsMacro
type: text/vnd.tiddlywiki

The tabs macro displays a list of tiddlers as a tab control. The user can switch between tabs by clicking on them. The tabs are labelled with the title of the corresponding tiddler, unless there is a `caption` field present in which case it is used instead.

By default the tab control arranges the tabs horizontally with the content underneath. You can also choose to have the tabs arranged vertically by passing the class `tw-vertical`.

! Parameters

|!Position |!Name |!Description |!Default |
|1st |tabsList |Filter giving the tiddlers to be displayed | |
|2nd |default |Name of the tiddler containing the default tab | |
|3rd |state |String to distinguish multiple tabs within the same tiddler (use of the system tiddler prefix is recommended) |''$:/state/tab'' |
|4th |class |Additional CSS classes for the three wrappers DIV of the tab | |
|5th |template |Optional template through which to render the tab content | |

Within the template the title of the current tab is available in the widget variable ''currentTab''.

! Examples

Here is an example of the tabs macro:

```
<<tabs "Docs WikiText Features RoadMap" "WikiText" "$:/state/tab1">>
```

<<tabs "Docs WikiText Features RoadMap" "WikiText" "$:/state/tab1">>

<<tabs "[tag[tips]]" "GoogleChromeTips" "$:/state/tab2" "tw-vertical">>
Docs update Hopefully fixing #309 2013-12-28 17:57:11 +00:00			`created: 20131228162203521`
Extend the tabs macro to allow tab contents to be templated 2014-07-02 11:15:52 +00:00			`modified: 20140702113527667`
Sort out the docs for the tabs macro 2013-11-21 17:32:24 +00:00			`tags: macros`
Docs update Hopefully fixing #309 2013-12-28 17:57:11 +00:00			`title: TabsMacro`
			`type: text/vnd.tiddlywiki`
Sort out the docs for the tabs macro 2013-11-21 17:32:24 +00:00
Docs update 2014-02-26 08:27:40 +00:00			The tabs macro displays a list of tiddlers as a tab control. The user can switch between tabs by clicking on them. The tabs are labelled with the title of the corresponding tiddler, unless there is a `caption` field present in which case it is used instead.
Sort out the docs for the tabs macro 2013-11-21 17:32:24 +00:00
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			By default the tab control arranges the tabs horizontally with the content underneath. You can also choose to have the tabs arranged vertically by passing the class `tw-vertical`.

Sort out the docs for the tabs macro 2013-11-21 17:32:24 +00:00			`! Parameters`

			`\|!Position \|!Name \|!Description \|!Default \|`
			`\|1st \|tabsList \|Filter giving the tiddlers to be displayed \| \|`
			`\|2nd \|default \|Name of the tiddler containing the default tab \| \|`
Docs update 2014-02-26 08:27:40 +00:00			`\|3rd \|state \|String to distinguish multiple tabs within the same tiddler (use of the system tiddler prefix is recommended) \|''$:/state/tab'' \|`
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			`\|4th \|class \|Additional CSS classes for the three wrappers DIV of the tab \| \|`
Extend the tabs macro to allow tab contents to be templated 2014-07-02 11:15:52 +00:00			`\|5th \|template \|Optional template through which to render the tab content \| \|`
Sort out the docs for the tabs macro 2013-11-21 17:32:24 +00:00
Fix problem with tabs macro changing current tiddler The problem was introduced in e18d8a88661a1c2caa1b722841747c75ca6af437 2014-07-12 08:07:51 +00:00			`Within the template the title of the current tab is available in the widget variable ''currentTab''.`

Sort out the docs for the tabs macro 2013-11-21 17:32:24 +00:00			`! Examples`

			`Here is an example of the tabs macro:`

Docs update Hopefully fixing #309 2013-12-28 17:57:11 +00:00			```
Docs update 2014-02-26 08:27:40 +00:00			`<<tabs "Docs WikiText Features RoadMap" "WikiText" "$:/state/tab1">>`
Docs update Hopefully fixing #309 2013-12-28 17:57:11 +00:00			```

Docs update 2014-02-26 08:27:40 +00:00			`<<tabs "Docs WikiText Features RoadMap" "WikiText" "$:/state/tab1">>`
Sort out the docs for the tabs macro 2013-11-21 17:32:24 +00:00
Use flexbox for vertical tabs Thus stepping into a new world: http://caniuse.com/flexbox The vertical tabs are now completely reusable, with sensible wrapping behaviour. 2014-05-12 07:41:47 +00:00			`<<tabs "[tag[tips]]" "GoogleChromeTips" "$:/state/tab2" "tw-vertical">>`