Template:Tabber/doc

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.

Parameters

 Tip: All parameters get parsed as tab=content, unless they start with the $ sign. These parameters are optional.

• $divclass - adds a custom class to the wrapper of the tabs
  • available tabber-center that centers tabs horizontally, tabber-vertical that swaps the layout to vertical mode and tabber-border that adds a subtle border with padding around contents
• $divstyle - adds a style to the wrapper of the tabs
• $tab[number]style - adds styles to the tab on the specified index
• $con[number]style - adds styles to the content box on the specified index
• $tabstyle - adds styles to tabs
• $constyle - adds styles to content boxes
• $ulstyle - adds styles to tab list
• $ulclass - adds classes to tab list

Example usage

{{Tabber
|$divclass=test
|Orange=Content of tab 1
|Banana=Content of tab 2
|Grape=Content of tab 3
|Pie=Content of tab 4
}}

Result:

• Orange
• Banana
• Grape
• Pie

Content of tab 1

Content of tab 2

Content of tab 3

Content of tab 4

  Tip: Nested tabs are also supported.

• Tab 1
• Tab 2
• Tab 3
• Tab 4

• Tab 1
• Tab 2
• Tab 3
• Tab 4

Content of tab 1

Content of tab 2

Content of tab 3

Content of tab 4

Content of tab 2

• Tab 1
• Tab 2
• Tab 3
• Tab 4

Content of tab 1

Content of tab 2

Content of tab 3

Content of tab 4

Content of tab 4

  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 <dfn>{{</dfn> and insert <dfn>}}</dfn> at the end of the parameter's value. Using it is not required until you notice that something breaks.

Use like so:

• Tab 1
• Tab 2

{{

Orange	Apple
Bread	Pie
Butter	Ice cream

}}

Content of tab 2

{{Tabber
|$divclass=test
|Tab 1=<dfn>{{</dfn>
{| class="wikitable"
|'''Orange'''
|'''Apple'''
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
<dfn>}}</dfn>
|Tab 2=Content of tab 2
}}

  Tip: You can also generate vertical tabs, as well as give them design similar to the in-game one. Use tabber-vertical and fancy classes with $divclass parameter.

• Tab 1
• Tab 2
• Tab 3

{{

Orange	Apple
Bread	Pie
Butter	Ice cream

}}

{{

Orange	Apple
Apple	Grapes
Avocado	Pineapples

}}

{{

Orange	Apple
Bread	Pie
Butter	Ice cream

}}