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: Difference between revisions

From The Codex
VisualWikitext
GiverOfThePeace
GiverOfThePeace (talk | contribs) (Created page with "'''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...")
 
Line 1: Line 1:
'''Syntax'''
;Description
This template is used to create tabs to help to navigate through subpages.


;Dependencies
This template uses the CSS associated to the class <code>.article-tabs</code> on [[MediaWiki:Common.css]] and the associated JS codes on [[MediaWiki:Common.js]].
'''Note:''' the CSS also uses [https://www.w3schools.com/css/css3_variables.asp CSS variables] that are unique to ''{{SITENAME}}''. If you wish to export this template on another wiki, either substitute the CSS variables with normal values or make your own.
;Syntax
<pre>
{{Tabs
{{Tabs
  | colorscheme    =  
  | colorscheme    =  
Line 12: Line 20:
  | subtab #      =  
  | subtab #      =  
}}
}}
</pre>
;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: <code><nowiki>{{NAMESPACE}}:{{BASEPAGENAME}}</nowiki></code>.
* '''root title=''' name to display in the tab for the root page link, default: the name used for '''root='''.
* '''show root=''' if equals to <code><nowiki>no</nowiki></code> the 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 {{T|Tabs}} can be nested to create second-level tabs under '''tab #='''.
;Examples
{{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:
<pre>
{{Tabs
| root          = Gomu Gomu no Mi
| root title    =
| tab 1          = Techniques
| tab 1 title    =
| tab 2          = Gear Second Techniques
| tab 2 title    =
}}
</pre>
{{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:
<pre>
{{Tabs
| colorscheme    = GomuColors
| root          = Gomu Gomu no Mi
| tab 1          = Techniques
| tab 2          = Gear Second Techniques
}}
</pre>
{{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
}}
The above example is created with the following code:
<pre>
{{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
}}
</pre>
{{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    =
}}
Using two {{T|Tabs}} adjacent to each other will change the style of the second one a bit. The above example is created with the following code:
<pre>
{{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    =
}}
</pre>
{{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.
}}
The above example is created with the following code:
<pre>
{{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.
}}
</pre>
{{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    =
  }}
}}
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:
<pre>
{{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    =
  }}
}}
</pre>


'''Parameters'''
;Notes
* Use subpages only when absolutely necessary, since they break up the content and it's not a good [[Help:SEO|SEO]] practice (regardless of the use of this template). Avoid using 2nd level subpages for the same reasons.
* Tab templates should use the "Design" [[Help:Template types|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.


All parameters are optional.
;See also
* [[:Category:Specific Tab Templates]].


*colorscheme= name of a color scheme to use from MediaWiki:ColorSchemes.css.
<noinclude>
*root= full name of the root page, namespace included, default: {{NAMESPACE}}:{{BASEPAGENAME}}.
[[Category:Template Documentation]]
*root title= name to display in the tab for the root page link, default: the name used for root=.
</noinclude>
*show root= if equals to no the 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 <nowiki>{{Tabs}}</nowiki> can be nested to create second-level tabs under tab #=.

Revision as of 23:08, 19 August 2022

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 no the 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.
}}


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
Retrieved from "https://thecodex.wiki/index.php?title=Template:Template:Tabs/doc&oldid=247433"