Template:Tab Content: Difference between revisions

From Puella Magi Wiki
Jump to navigation Jump to search
(Documentation)
(Oh, that first line is redundant with the new paragraph)
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
<noinclude>
<noinclude>
Add a tab to a tab-view div.
Defines a single tab on a tab container, which is a <tt><nowiki><div></nowiki></tt> with <tt>class="tabs"</tt>. If you want to control the height of the tab view, you can add something like <tt>style="min-height:15em"</tt> to the div. (That is the default value if not specified.)
 
Possible parameters
 
;id:The anchor ID, used to link to a tab. If omitted, the tab title is used as the ID. This '''''must''''' be unique on the page, and also '''''must not''''' be the same as any section header on the page. If there is a duplicate ID, some tabs may be unreachable.
;title:The title to display on the tab. The tab will stretch to fit it.
;(unnamed):The unnamed argument will be used as the content of the tab.


Sample usage:
Sample usage:
Line 23: Line 29:
{{Tab Content|id=e|title=Tab E|This is the content of tab E.}}
{{Tab Content|id=e|title=Tab E|This is the content of tab E.}}
</div>
</div>
</noinclude><includeonly><div id="{{{id}}}">[[#{{{id}}}|{{{title}}}]]
</noinclude><includeonly><div id="{{{id|{{{title}}}}}}">[[#{{{id|{{{title}}}}}}|{{{title}}}]]
<div>{{{1}}}</div>
<div>{{{1}}}</div>
</div></includeonly>
</div></includeonly>

Latest revision as of 19:21, 19 August 2023

Defines a single tab on a tab container, which is a <div> with class="tabs". If you want to control the height of the tab view, you can add something like style="min-height:15em" to the div. (That is the default value if not specified.)

Possible parameters

id
The anchor ID, used to link to a tab. If omitted, the tab title is used as the ID. This must be unique on the page, and also must not be the same as any section header on the page. If there is a duplicate ID, some tabs may be unreachable.
title
The title to display on the tab. The tab will stretch to fit it.
(unnamed)
The unnamed argument will be used as the content of the tab.

Sample usage:

<div class="tabs">
{{Tab Content|id=a|title=Tab A|This is the content of tab A.}}
{{Tab Content|id=b|title=Tab B|This is the content of tab B.}}
{{Tab Content|id=c|title=Tab C|This is the content of tab C.}}
{{Tab Content|id=d|title=Tab D|This is the content of tab D.}}
{{Tab Content|id=e|title=Tab E|This is the content of tab E.}}
</div>

The above code renders as follows:

Tab A
This is the content of tab A.
Tab B
This is the content of tab B.
Tab C
This is the content of tab C.
Tab D
This is the content of tab D.
Tab E
This is the content of tab E.