2022-09-24 11:56:06 +00:00
|
|
|
title: $:/core/macros/tabs
|
|
|
|
tags: $:/tags/Macro
|
2022-05-29 09:51:49 +00:00
|
|
|
code-body: yes
|
2014-04-09 19:12:10 +00:00
|
|
|
|
2022-09-24 11:56:06 +00:00
|
|
|
\define tabs-button()
|
2022-03-26 15:19:04 +00:00
|
|
|
\whitespace trim
|
2022-06-28 13:05:52 +00:00
|
|
|
<$button set=<<tabsState>> setTo=<<currentTab>> default=<<__default__>> selectedClass="tc-tab-selected" tooltip={{!!tooltip}} role="switch">
|
2022-03-31 14:41:19 +00:00
|
|
|
<$tiddler tiddler=<<save-currentTiddler>>>
|
|
|
|
<$set name="tv-wikilinks" value="no">
|
|
|
|
<$transclude tiddler=<<__buttonTemplate__>> mode="inline">
|
|
|
|
<$transclude tiddler=<<currentTab>> field="caption">
|
|
|
|
<$macrocall $name="currentTab" $type="text/plain" $output="text/plain"/>
|
|
|
|
</$transclude>
|
|
|
|
</$transclude>
|
|
|
|
</$set>
|
|
|
|
</$tiddler>
|
|
|
|
<<__actions__>>
|
|
|
|
</$button>
|
|
|
|
\end
|
2014-07-02 11:15:52 +00:00
|
|
|
|
2022-09-24 11:56:06 +00:00
|
|
|
\define tabs-tab()
|
2022-03-31 14:41:19 +00:00
|
|
|
\whitespace trim
|
|
|
|
<$set name="save-currentTiddler" value=<<currentTiddler>>>
|
|
|
|
<$tiddler tiddler=<<currentTab>>>
|
|
|
|
<<tabs-button>>
|
|
|
|
</$tiddler>
|
|
|
|
</$set>
|
|
|
|
\end
|
2014-07-02 11:15:52 +00:00
|
|
|
|
2022-09-24 11:56:06 +00:00
|
|
|
\define tabs-tab-list()
|
2022-03-31 14:41:19 +00:00
|
|
|
\whitespace trim
|
|
|
|
<$list filter=<<__tabsList__>> variable="currentTab" storyview="pop">
|
|
|
|
<<tabs-tab>>
|
|
|
|
</$list>
|
|
|
|
\end
|
2014-06-21 10:16:35 +00:00
|
|
|
|
2022-09-24 11:56:06 +00:00
|
|
|
\define tabs-tab-body()
|
2022-03-31 14:41:19 +00:00
|
|
|
\whitespace trim
|
|
|
|
<$list filter=<<__tabsList__>> variable="currentTab">
|
|
|
|
<$reveal type="match" state=<<tabsState>> text=<<currentTab>> default=<<__default__>> retain=<<__retain__>> tag="div">
|
|
|
|
<$transclude tiddler=<<__template__>> mode="block">
|
|
|
|
<$transclude tiddler=<<currentTab>> mode="block"/>
|
|
|
|
</$transclude>
|
|
|
|
</$reveal>
|
2014-06-21 10:16:35 +00:00
|
|
|
</$list>
|
2022-03-31 14:41:19 +00:00
|
|
|
\end
|
|
|
|
|
2022-09-24 11:56:06 +00:00
|
|
|
\define tabs(tabsList,default,state:"$:/state/tab",class,template,buttonTemplate,retain,actions,explicitState)
|
2022-03-31 14:41:19 +00:00
|
|
|
\whitespace trim
|
|
|
|
<$qualify title=<<__state__>> name="qualifiedState">
|
2022-07-28 20:26:09 +00:00
|
|
|
<$let tabsState={{{ [<__explicitState__>minlength[1]] ~[<qualifiedState>] }}}>
|
2022-03-31 14:41:19 +00:00
|
|
|
<div class={{{ [[tc-tab-set]addsuffix[ ]addsuffix<__class__>] }}}>
|
|
|
|
<div class={{{ [[tc-tab-buttons]addsuffix[ ]addsuffix<__class__>] }}}>
|
|
|
|
<<tabs-tab-list>>
|
|
|
|
</div>
|
|
|
|
<div class={{{ [[tc-tab-divider]addsuffix[ ]addsuffix<__class__>] }}}/>
|
|
|
|
<div class={{{ [[tc-tab-content]addsuffix[ ]addsuffix<__class__>] }}}>
|
|
|
|
<<tabs-tab-body>>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-07-28 20:26:09 +00:00
|
|
|
</$let>
|
2022-03-31 14:41:19 +00:00
|
|
|
</$qualify>
|
2022-09-24 11:56:06 +00:00
|
|
|
\end
|