Template:Tabber/doc: Difference between revisions
→Example usage
(8 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. | ||
Line 4: | Line 9: | ||
== 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>$divclass</code> - adds a custom class to the wrapper of the tabs | *<code>$divclass</code> - adds a custom class to the wrapper of the tabs. Available: | ||
** | **<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>$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 | ||
Line 11: | Line 20: | ||
*<code>$tabstyle</code> - adds styles to tabs | *<code>$tabstyle</code> - adds styles to tabs | ||
*<code>$constyle</code> - adds styles to content boxes | *<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 classes to tab list | *<code>$ulclass</code> - adds classes to tab list | ||
Line 17: | Line 27: | ||
<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: | ||
<pre> | <pre> | ||
<nowiki>{{Tabber | <nowiki>{{Tabber | ||
|$divclass= | |$divclass=tabber-vertical | ||
|Tab 1=<dfn>{{</dfn> | |Tab 1=<dfn>{{</dfn> | ||
{| class="wikitable" | {| class="wikitable" | ||
Line 90: | Line 85: | ||
}}</nowiki></pre> | }}</nowiki></pre> | ||
'''Result:''' | |||
{{Tabber | {{Tabber | ||
|$divclass=tabber-vertical | |$divclass=tabber-vertical | ||
|Tab 1=<dfn>{{</dfn> | |Tab 1=<dfn>{{</dfn> | ||
{| class="wikitable" | {| class="wikitable" | ||
Line 106: | Line 101: | ||
|} | |} | ||
<dfn>}}</dfn> | <dfn>}}</dfn> | ||
|Tab 2=<dfn>{{</dfn> | |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" | {| class="wikitable" | ||
|'''Orange''' | |'''Orange''' | ||
Line 118: | Line 120: | ||
|} | |} | ||
<dfn>}}</dfn> | <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" | {| class="wikitable" | ||
|'''Orange''' | |'''Orange''' | ||
|'''Apple''' | |'''Apple''' | ||
|- | |- | ||
| | |Apple | ||
| | |Grapes | ||
|- | |- | ||
| | |Avocado | ||
| | |Pineapples | ||
|} | |} | ||
<dfn>}}</dfn> | <dfn>}}</dfn> | ||
}} | }} |