2014-12-11 14:24:01 +00:00
caption: tabs
2013-12-28 17:57:11 +00:00
created: 20131228162203521
2014-12-11 14:24:01 +00:00
modified: 20141211141507313
2014-09-10 22:42:06 +00:00
tags: Macros
2013-12-28 17:57:11 +00:00
title: TabsMacro
type: text/vnd.tiddlywiki
2013-11-21 17:32:24 +00:00
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.
2013-11-21 17:32:24 +00:00
2014-08-28 18:08:31 +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 `tc-vertical`.
2014-05-11 17:47:14 +00:00
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 | |
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'' |
2014-12-09 15:08:10 +00:00
|4th |class |Additional CSS classes for the three wrapper DIVs that make up the tabs (multiple classes can be separated with spaces) | |
2014-07-02 11:15:52 +00:00
|5th |template |Optional template through which to render the tab content | |
2013-11-21 17:32:24 +00:00
2014-09-28 11:25:27 +00:00
Within the template the title of the current tab is available in the widget variable ''currentTab''. The ''currentTiddler'' variable is not affected by the tabs macro.
2014-07-12 08:07:51 +00:00
2013-11-21 17:32:24 +00:00
! Examples
2014-07-25 07:45:57 +00:00
Here are some examples of the tabs macro:
2013-11-21 17:32:24 +00:00
2013-12-28 17:57:11 +00:00
```
2014-07-25 07:49:58 +00:00
<<tabs "SampleTabOne SampleTabTwo SampleTabThree SampleTabFour" "SampleTabThree" "$:/state/tab1">>
2014-07-25 07:45:57 +00:00
2014-08-28 18:08:31 +00:00
<<tabs "[tag[sampletab]]" "SampleTabTwo" "$:/state/tab2" "tc-vertical">>
2013-12-28 17:57:11 +00:00
```
2014-07-25 07:49:58 +00:00
<<tabs "SampleTabOne SampleTabTwo SampleTabThree SampleTabFour" "SampleTabThree" "$:/state/tab1">>
2013-11-21 17:32:24 +00:00
2014-08-28 18:08:31 +00:00
<<tabs "[tag[sampletab]]" "SampleTabTwo" "$:/state/tab2" "tc-vertical">>
2014-12-11 14:24:01 +00:00
//Exercise//: how would you make sure that the second tab list is correctly sorted? Hint : read [[Tagging]] until the end.
