Anonymous

Template:Tabber/doc: Difference between revisions

From Elwiki
(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>$containerclass</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>$containerstyle</code> - adds a style to the wrapper of the tabs
**<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>$tab[number]style</code> - adds styles to the content box on the specified index
*<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>$contentsstyle</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>$ulclass</code> - adds classes to tab list


== Example usage ==
== Example usage ==
<pre>
<pre>
{{Tabber
{{Tabber
|$containerclass=test
|Orange=Content of tab 1
|Tab 1=Content of tab 1
|Banana=Content of tab 2
|Tab 2=Content of tab 2
|Grape=Content of tab 3
|Tab 3=Content of tab 3
|Pie=Content of tab 4
|Tab 4=Content of tab 4
}}
}}
</pre>
</pre>
'''Result''':
'''Result''':
{{Tabber
{{Tabber
|$containerclass=test
|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 3=Content of tab 3
|Tab 4=Content of tab 4
}}
}}
|Tab 2=Content of tab 2
}}</nowiki></pre>
'''Result:'''


[[File:Icon - Info.png|20px]] ''Tip'': Nested tabs are also supported.
{{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 3=Content of tab 3
|Tab 4=Content of tab 4
}}
}}
|Tab 2=Content of tab 2
|Tab 2=Content of tab 2
|Tab 3=
}}
 
[[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=Content of 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
|Tab 3=Content of tab 3
|Tab 4=Content of tab 4
}}
}}
|Tab 4=Content of tab 4
 
[[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>
}}
}}
ElEditors
8,317

edits