Template:Tab: Difference between revisions
Thecornerman (talk | contribs) m (Undo revision 385912 by Thecornerman (talk)) Tag: Undo |
No edit summary |
||
(5 intermediate revisions by one other user not shown) | |||
Line 1: | Line 1: | ||
<div class="round" style="margin: auto; width: {{{width|fit-content}}}; display: table; {{#if:{{{header|}}}|border: 2px solid {{Color2}}; | <div class="round tab_main" style="margin: auto; width: {{{width|fit-content}}}; display: table; {{#if:{{{header|}}}|border: 2px solid {{Color2}}; background: {{Color3}}|margin-top: 1em}};"> | ||
{{#if:{{{header|}}}|<div class="round" style="border: 2px solid {{Color2}}; background: {{Color1}}; text-align: center; padding: 3px; font-size: larger; margin: 3px">'''{{{header}}}'''</div>}} | {{#if:{{{header|}}}|<div class="round" style="border: 2px solid {{Color2}}; background: {{Color1}}; text-align: center; padding: 3px; font-size: larger; margin: 3px 3px 1em">'''{{{header}}}'''</div>}} | ||
<div class="tabcontainer" style="padding-bottom: 2px; margin: | <div class="tabcontainer" style="padding-bottom: 2px; margin: 4px 4px 0; text-align: center; {{{tabstyle|}}}"> | ||
<span class="tab_tab {{#ifeq:{{{default|1}}}|1|tabselected}}">{{{tab1}}}</span> <!-- | <span class="tab_tab {{#ifeq:{{{default|1}}}|1|tabselected}}">{{{tab1}}}</span> <!-- | ||
--><span class="tab_tab {{#ifeq:{{{default}}}|2|tabselected}}">{{{tab2}}}</span> <!-- | --><span class="tab_tab {{#ifeq:{{{default}}}|2|tabselected}}">{{{tab2}}}</span> <!-- | ||
Line 35: | Line 35: | ||
{{Tab/Content|15|{{{default}}}|{{{tab15|}}}|{{{content15}}}}} | {{Tab/Content|15|{{{default}}}|{{{tab15|}}}|{{{content15}}}}} | ||
</div> | </div> | ||
</div><noinclude> | </div><noinclude>{{Doc}} | ||
{{ | |||
}} | |||
</noinclude> | </noinclude> |
Latest revision as of 00:43, 22 January 2023
{{{tab1}}} {{{tab2}}}
{{{content1}}}
Purpose
This template is a tool to create templates with a tabbed layout. This condenses the overall size of the template but still offers everything in it. This makes templates with a lot of content far less intimidating and much easier to get around. By design, the template will display all the tab contents if the JavaScript does not load properly.
Usage
This template currently supports up to 15 tabs. To use this template, start with this layout:
{{Tab |header= |default= |width= |height= |tabstyle= |constyle= |tab1= |content1= |tab2= |content2= |tab3= |content3= ... |tab14= |content14= |tab15= |content15= }}
header: The content you want to display in the header field of the template. If left blank, the tabs will not be in a stylized container (Optional).
default: The tab to display when the page first loads. Defaults to "1" (Optional).
width: The width of the navigation template. Fits to the contents if left blank. You should base this on what makes the contents look best (Optional).
height: The height of the tab contents section. Fits to the contents if left blank. Base this on the largest content tab. Usually 20px per line works best. You may wish to add an addition 20px to account for the bolding that happens when you're on the page for a link, as this might add a new line (Optional).
tabstyle: CSS styles to be applied to the tab container (Optional).
constyle: CSS styles to be applied to the content container (Optional).
tab#: The name of each tab. It's best to keep the names short as long names tend to look bad. You can also use images here; however, if you do, they should be entered with a blank link=
parameter. If you neglect to do this, clicking the tab will take you to the that page instead of loading the contents (Required).
content#: The content you want to display for each tab. There is no limit here, but you may want to insert line breaks and adjust the width and height parameters to make the whole template look its best (Required).
Examples
- See Darkness Beneath the Earth's enemy and NPC data for fairly standard use of tabs.
- See {{CharStats GBA}} for an example of tabs within a table, and tabs within a template.
- See Chosen by Fate#Boss data for an example of tabs with a header, and an example of nested tabs.
Origins
This template originated from Zelda Wiki.