Template:Tabber/doc: Difference between revisions
→Example usage
(Created page with "== Overview == This is the refreshed version of Template:Tabs and what you should be using for making tabs now. This version is enhanced with Mobile Frontend support and i...") |
|||
| (24 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{InfoBanner | |||
|type=info | |||
|text=If you are experiencing issues with post-expand template include limits or tables/other templates transcluded inside tab contents, consider using the [[Help:Extension:Tabber|Extension]]. | |||
}} | |||
== Overview == | == Overview == | ||
This is the refreshed version of [[Template:Tabs]] and what you should be using for making tabs now. This version is enhanced with Mobile Frontend support and is generally cleaned up. Also, the syntax has been updated. | This is the refreshed version of [[Template:Tabs]] and what you should be using for making tabs now. This version is enhanced with Mobile Frontend support and is generally cleaned up. Also, the syntax has been updated. | ||
== Parameters == | == Parameters == | ||
[[File:Icon - Info.png|20px]] ''Tip'': All parameters get parsed as tab=content, unless they start with the '''$''' sign. | [[File:Icon - Info.png|20px]] '''Tip''': All parameters get parsed as tab=content, unless they start with the '''$''' sign. These parameters are optional. | ||
*<code>$ | *<code>$divclass</code> - adds a custom class to the wrapper of the tabs. Available: | ||
*<code>$ | **<code>tabber-center</code> that centers tabs horizontally, | ||
**<code>tabber-vertical</code> that swaps the layout to vertical mode, | |||
**<code>tabber-border</code> that adds a subtle border with padding around contents, | |||
**<code>tabber-padding</code> that increases the content padding, | |||
**<code>fancy</code> that changes the design to resemble the in-game one. | |||
*<code>$divstyle</code> - adds a style to the wrapper of the tabs | |||
*<code>$tab[number]style</code> - adds styles to the tab on the specified index | *<code>$tab[number]style</code> - adds styles to the tab on the specified index | ||
*<code>$ | *<code>$con[number]style</code> - adds styles to the content box on the specified index | ||
*<code>$tabstyle</code> - adds styles to tabs | *<code>$tabstyle</code> - adds styles to tabs | ||
*<code>$ | *<code>$constyle</code> - adds styles to content boxes | ||
*<code>$conclass</code> - adds classes to content boxes | |||
*<code>$ulstyle</code> - adds styles to tab list | |||
*<code>$ulclass</code> - adds classes to tab list | |||
== Example usage == | == Example usage == | ||
<pre> | <pre> | ||
{{Tabber | {{Tabber | ||
| | |Orange=Content of tab 1 | ||
|Banana=Content of tab 2 | |||
| | |Grape=Content of tab 3 | ||
| | |Pie=Content of tab 4 | ||
| | |||
}} | }} | ||
</pre> | </pre> | ||
'''Result''': | '''Result''': | ||
{{Tabber | {{Tabber | ||
|$ | |Orange=Content of tab 1 | ||
|Banana=Content of tab 2 | |||
|Grape=Content of tab 3 | |||
|Pie=Content of tab 4 | |||
}} | |||
[[File:Icon - Info.png|20px]] '''Tip''': Nested tabs are also supported. Using '''tabber-border''' in '''$divclass''' recommended. | |||
<pre><nowiki>{{Tabber | |||
|$divclass=tabber-border | |||
|Tab 1= | |||
{{Tabber | |||
|Tab 1=Content of tab 1 | |Tab 1=Content of tab 1 | ||
|Tab 2=Content of tab 2 | |Tab 2=Content of tab 2 | ||
}} | }} | ||
|Tab 2=Content of tab 2 | |||
}}</nowiki></pre> | |||
'''Result:''' | |||
{{Tabber | {{Tabber | ||
|$divclass=tabber-border | |||
|Tab 1= | |Tab 1= | ||
{{Tabber | {{Tabber | ||
|Tab 1=Content of tab 1 | |Tab 1=Content of tab 1 | ||
|Tab 2=Content of tab 2 | |Tab 2=Content of tab 2 | ||
}} | }} | ||
|Tab 2=Content of tab 2 | |Tab 2=Content of tab 2 | ||
|Tab | }} | ||
[[File:Icon - Warning.png|20px]] '''Warning''': Templates do not work well with tables and other templates, but there is a workaround for that. Before providing the parameter's value that contains MediaWiki markup, use <code><nowiki><dfn>{{</dfn></nowiki></code> and insert <code><nowiki><dfn>}}</dfn></nowiki></code> at the end of the parameter's value. Using it is not required until you notice that something breaks. | |||
Use like so: | |||
<pre> | |||
<nowiki>{{Tabber | |||
|$divclass=tabber-vertical | |||
|Tab 1=<dfn>{{</dfn> | |||
{| class="wikitable" | |||
|'''Orange''' | |||
|'''Apple''' | |||
|- | |||
|Bread | |||
|Pie | |||
|- | |||
|Butter | |||
|Ice cream | |||
|} | |||
<dfn>}}</dfn> | |||
|Tab 2=Content of tab 2 | |||
}}</nowiki></pre> | |||
'''Result:''' | |||
{{Tabber | {{Tabber | ||
|Tab 1= | |$divclass=tabber-vertical | ||
|Tab 1=<dfn>{{</dfn> | |||
{| class="wikitable" | |||
|'''Orange''' | |||
|'''Apple''' | |||
|- | |||
|Bread | |||
|Pie | |||
|- | |||
|Butter | |||
|Ice cream | |||
|} | |||
<dfn>}}</dfn> | |||
|Tab 2=Content of tab 2 | |Tab 2=Content of tab 2 | ||
}} | }} | ||
| | |||
[[File:Icon - Info.png|20px]] '''Tip''': You can also style tabs with a similar design to the one that appears in-game when setting the '''$divclass''' parameter to '''fancy'''. You can combine it with other classes. Recommended: '''tabber-vertical'''. | |||
<pre><nowiki>{{Tabber | |||
|$divclass=tabber-vertical fancy | |||
|Latin=Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | |||
|Fruits=<dfn>{{</dfn> | |||
{| class="wikitable" | |||
|'''Orange''' | |||
|'''Apple''' | |||
|- | |||
|Apple | |||
|Grapes | |||
|- | |||
|Avocado | |||
|Pineapples | |||
|} | |||
<dfn>}}</dfn> | |||
}}</nowiki></pre> | |||
'''Result:''' | |||
{{Tabber | |||
|$divclass=tabber-vertical fancy | |||
|Latin=Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | |||
|Fruits=<dfn>{{</dfn> | |||
{| class="wikitable" | |||
|'''Orange''' | |||
|'''Apple''' | |||
|- | |||
|Apple | |||
|Grapes | |||
|- | |||
|Avocado | |||
|Pineapples | |||
|} | |||
<dfn>}}</dfn> | |||
}} | }} | ||