Template:Tabber/doc: Difference between revisions
→Example usage
m (→Parameters) |
|||
| (14 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. These parameters are optional. | [[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>tabber-center</code> that centers tabs horizontally, | ||
*<code>$ | **<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>$ulstyle</code> - adds styles to tab list | ||
*<code>$ulclass</code> - adds | *<code>$ulclass</code> - adds classes to tab list | ||
== Example usage == | == Example usage == | ||
<pre> | <pre> | ||
{{Tabber | {{Tabber | ||
|Orange=Content of tab 1 | |Orange=Content of tab 1 | ||
|Banana=Content of tab 2 | |Banana=Content of tab 2 | ||
| Line 26: | Line 35: | ||
'''Result''': | '''Result''': | ||
{{Tabber | {{Tabber | ||
|Orange=Content of tab 1 | |Orange=Content of tab 1 | ||
|Banana=Content of tab 2 | |Banana=Content of tab 2 | ||
| Line 33: | Line 41: | ||
}} | }} | ||
[[File:Icon - Info.png|20px]] '''Tip''': Nested tabs are also supported. | [[File:Icon - Info.png|20px]] '''Tip''': Nested tabs are also supported. Using '''tabber-border''' in '''$divclass''' recommended. | ||
{{Tabber | |||
<pre><nowiki>{{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 | }}</nowiki></pre> | ||
'''Result:''' | |||
{{Tabber | |||
|$divclass=tabber-border | |||
|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 | |Tab 2=Content of tab 2 | ||
}} | }} | ||
[[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. | [[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: | Use like so: | ||
{{Tabber | |||
|$ | <pre> | ||
<nowiki>{{Tabber | |||
|$divclass=tabber-vertical | |||
|Tab 1=<dfn>{{</dfn> | |Tab 1=<dfn>{{</dfn> | ||
{| class="wikitable" | {| class="wikitable" | ||
| Line 70: | Line 83: | ||
<dfn>}}</dfn> | <dfn>}}</dfn> | ||
|Tab 2=Content of tab 2 | |Tab 2=Content of tab 2 | ||
}} | }}</nowiki></pre> | ||
'''Result:''' | |||
{{Tabber | |||
|$divclass=tabber-vertical | |||
|$ | |||
|Tab 1=<dfn>{{</dfn> | |Tab 1=<dfn>{{</dfn> | ||
{| class="wikitable" | {| class="wikitable" | ||
| Line 88: | Line 102: | ||
<dfn>}}</dfn> | <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> | }}</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> | |||
}} | |||