The official discord link if you wish to join the discord: https://discord.gg/j5RKwCvAFu
Support the wiki on our official Ko-Fi page or Patreon page!
Template:Template:Tabs/doc
- Description
This template is used to create tabs to help to navigate through subpages.
- Dependencies
This template uses the CSS associated to the class .article-tabs on MediaWiki:Common.css and the associated JS codes on MediaWiki:Common.js.
Note: the CSS also uses CSS variables that are unique to The Codex. If you wish to export this template on another wiki, either substitute the CSS variables with normal values or make your own.
- Syntax
{{Tabs
| colorscheme =
| root =
| root title =
| show root =
| root tooltip =
| tab # =
| tab # title =
| tab # tooltip =
| subtab # =
}}
- Parameters
All parameters are optional.
- colorscheme= name of a color scheme to use from MediaWiki:ColorSchemes.css.
- root= full name of the root page, namespace included, default:
{{NAMESPACE}}:{{BASEPAGENAME}}. - root title= name to display in the tab for the root page link, default: the name used for root=.
- show root= if equals to
nothe root tab will be hidden. - root tooltip= tooltip to display.
- tab #= name of a subpage to link with a new tab. A maximum of 20 subpage tabs are supported.
- tab # title= name to display in the tab for the subpage link, default: the name used for tab #=. If tab #= is left empty, but tab # title= is defined, then a tab without link will be displayed.
- tab # tooltip= tooltip to display.
- subtab #= A second {{Tabs}} can be nested to create second-level tabs under tab #=.
- Examples
The above example is created with the following code:
{{Tabs
| root = Gomu Gomu no Mi
| root title =
| tab 1 = Techniques
| tab 1 title =
| tab 2 = Gear Second Techniques
| tab 2 title =
}}
The above example is created with the following code:
{{Tabs
| colorscheme = GomuColors
| root = Gomu Gomu no Mi
| tab 1 = Techniques
| tab 2 = Gear Second Techniques
}}
The above example is created with the following code:
{{Tabs
| colorscheme = GomuColors
| root = Gomu Gomu no Mi
| root title = Fruit
| tab 1 = Techniques
| tab 1 title = Base
| tab 1 tooltip = Base techniques
| tab 2 = Gear Second Techniques
| tab 2 title = Gear 2nd
| tab 2 tooltip = Advanced techniques
}}
Using two {{Tabs}} adjacent to each other will change the style of the second one a bit. The above example is created with the following code:
{{Tabs
| colorscheme = StrawHatPiratesColors
| root = Nami
| root title = Introduction
| tab 1 = Gallery
| tab 1 title =
| tab 2 = Personality and Relationships
| tab 2 title =
| tab 3 = Abilities and Powers
| tab 3 title =
| tab 4 = History
| tab 4 title =
| tab 5 = Misc.
| tab 5 title =
}}
{{Tabs
| colorscheme = SubTabsColors
| root = Nami/History
| root title = Past and Before the Timeskip
| tab 1 = During and After the Timeskip
| tab 1 title =
}}
The above example is created with the following code:
{{Tabs
| colorscheme = StrawHatPiratesColors
| root = Monkey D. Luffy
| root title = Introduction
| tab 1 = Gallery
| tab 2 = Personality
| tab 3 = Relationships
| subtab 3 =
{{Tabs
| colorscheme =
| root = Monkey D. Luffy/Relationships
| root title = Crew
| tab 1 = Family
| tab 2 = Pirates
| tab 3 = Emperors and Crews
| tab 4 = World Government
| tab 5 = Citizens
| tab 6 = Misc.
}}
| tab 4 = Abilities and Powers
| tab 5 = History
| subtab 5 =
{{Tabs
| colorscheme =
| root = Monkey D. Luffy/History
| root title = East Blue
| root tooltip = Past, East Blue Saga
| tab 1 = Paradise
| tab 1 title =
| tab 1 tooltip = Alabasta Saga, Sky Island Saga, Water 7 Saga
| tab 2 = Summit War
| tab 2 title =
| tab 2 tooltip = Thriller Bark Saga, Summit War Saga
| tab 3 = Straw Hats Return
| tab 3 title =
| tab 3 tooltip = During the Timeskip, Fish-Man Island Saga
| tab 4 = New World
| tab 4 title =
| tab 4 tooltip = Dressrosa Saga
| tab 5 = Whole Cake
| tab 5 title =
| tab 5 tooltip = Four Emperors Saga: Zou Arc, Whole Cake Island Arc
| tab 6 = Wano
| tab 6 title =
| tab 6 tooltip = Four Emperors Saga: Levely Arc, Wano Country Arc
}}
| tab 6 = Misc.
}}
- Main
- FUNimation/Voice Actors
- Episode List and DVD Releases
It's possible to rearrange the tabs in a second level, even if the have the same "root", by making a tab without a link and a subtab. The above example is created with the following code:
{{Tabs
| colorscheme =
| root = FUNimation
| root title = Main
| tab 1 = Voice Actors
| tab 1 title =
| tab 2 =
| tab 2 title = Episode List and DVD Releases
| subtab 2 =
{{Tabs
| colorscheme =
| root = FUNimation
| show root = no
| tab 1 = Seasons 1-3
| tab 1 title =
| tab 2 = Seasons 4-6
| tab 2 title =
| tab 3 = Seasons 7-9
| tab 3 title =
| tab 4 = Seasons 10-12
| tab 4 title =
| tab 5 = Collections
| tab 5 title =
| tab 6 = Movies And Specials
| tab 6 title =
| tab 7 = Release Dub
| tab 7 title =
| tab 8 = Release Sub
| tab 8 title =
}}
}}
- Notes
- Use subpages only when absolutely necessary, since they break up the content and it's not a good SEO practice (regardless of the use of this template). Avoid using 2nd level subpages for the same reasons.
- Tab templates should use the "Design" template type.
- This template is displayed on mobile as a simple list of links.
- The basic functionality of making one-level tabs does not require the use of JavaScript.
- See also
