Template:Tabber: Difference between revisions
Created page with "<includeonly><div class="dbe-tabber">{{trim|{{{1|}}}}}</div></includeonly><noinclude>{{tlx|tabber}} presents a JavaScript tab interface so that readers can click tabs to switc..." |
No edit summary |
||
| Line 1: | Line 1: | ||
<includeonly><div class="dbe-tabber">{{trim|{{{1|}}}}}</div></includeonly><noinclude>{{tlx|tabber}} presents a JavaScript tab interface so that readers can click tabs to switch between viewing different panels. Used in conjunction with the {{tlx|tab}} template. | <includeonly><div class="dbe-tabber">{{trim|{{{1|}}}}}</div></includeonly><noinclude>{{tlx|tabber}} presents a JavaScript tab interface so that readers can click tabs to switch between viewing different panels. Used in conjunction with the {{tlx|tab}} template. | ||
== | ==Example== | ||
By default, the first tab will be active when the tabber is generated, but this can be overridden by placing an <code>active</code> argument in any tab. (The value of the argument does not matter as long as it is not empty, but <code>true</code> is an intuitive value to use.) | |||
In addition, the {{tlx|tab}} template accepts <code>panel style</code> and <code>title style</code> arguments that can be used to customize the appearance of the tab panel and its title tab. Arguments must be formatted as CSS. Passing a <code>panel style</code> argument will completely overwrite the default style (which consists of rounded borders and padding) while passing a <code>title style</code> argument will supplement the styling defined in [[MediaWiki:Common.css]]. | |||
<nowiki>{{tabber | | <nowiki>{{tabber | | ||
| Line 41: | Line 12: | ||
}} | }} | ||
{{tab | active = true | Vegeta | | {{tab | active = true | Vegeta | panel style = border: solid 0.2em black; | | ||
This tab will educate the user with a slew of info on Vegeta | This tab will educate the user with a slew of info on Vegeta | ||
}} | }} | ||
{{tab | Piccolo | | {{tab | Piccolo | title style = color: magenta; | | ||
This tab is all about Piccolo. | This tab is all about Piccolo. | ||
}} | }} | ||
}}</nowiki> | }}</nowiki> | ||
{{tabber | | {{tabber | | ||
| Line 89: | Line 28: | ||
}} | }} | ||
{{tab | Vegeta | panel style = border: solid 0.2em black; | | {{tab | active = true | Vegeta | panel style = border: solid 0.2em black; | | ||
This tab will educate the user with a slew of info on Vegeta | This tab will educate the user with a slew of info on Vegeta | ||
}} | }} | ||
Revision as of 15:14, 23 November 2013
{{tabber}} presents a JavaScript tab interface so that readers can click tabs to switch between viewing different panels. Used in conjunction with the {{tab}} template.
Example
By default, the first tab will be active when the tabber is generated, but this can be overridden by placing an active argument in any tab. (The value of the argument does not matter as long as it is not empty, but true is an intuitive value to use.)
In addition, the {{tab}} template accepts panel style and title style arguments that can be used to customize the appearance of the tab panel and its title tab. Arguments must be formatted as CSS. Passing a panel style argument will completely overwrite the default style (which consists of rounded borders and padding) while passing a title style argument will supplement the styling defined in MediaWiki:Common.css.
{{tabber |
{{tab | Son Goku |
This tab contains all sorts of information about Goku.
}}
{{tab | active = true | Vegeta | panel style = border: solid 0.2em black; |
This tab will educate the user with a slew of info on Vegeta
}}
{{tab | Piccolo | title style = color: magenta; |
This tab is all about Piccolo.
}}
}}
Son Goku
This tab contains all sorts of information about Goku.
Vegeta
This tab will educate the user with a slew of info on Vegeta
Piccolo
This tab is all about Piccolo.