| Site News |
|---|
| Warning: This wiki contains spoilers. Read at your own risk! Social media: If you would like, please join our Discord server, and/or follow us on Twitter (X) or Tumblr! |
Template:Tab: Difference between revisions
Thecornerman (talk | contribs) m (Changed overall content container from a table to <div>; added some use examples) |
Thecornerman (talk | contribs) mNo edit summary |
||
| Line 1: | Line 1: | ||
{| class="round" style="margin: auto; width: {{{width|auto}}}; display: table; {{#if:{{{header|}}}|border: 2px solid {{Color2}}; background: {{Color3}};}}" | |||
{{#if:{{{header|}}}|<div class="round" style="border: 2px solid {{Color2}}; background: {{Color1}}; text-align: center; padding: 3px; | {{#if:{{{header|}}}|{{!}}<div class="round" style="border: 2px solid {{Color2}}; background: {{Color1}}; text-align:center; padding:3px;"><big>'''{{{header}}}'''</big></div>}} | ||
<div class= | |- | ||
| | |||
<div class=tabcontainer style="padding-bottom:2px; margin: 1em 4px 0; text-align:center"> | |||
<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 18: | Line 20: | ||
-->{{Tab/Tab|15|{{{default}}}|{{{tab15|}}}}} | -->{{Tab/Tab|15|{{{default}}}|{{{tab15|}}}}} | ||
</div> | </div> | ||
<div class="tabcontents" style="height: {{{height|auto}}} | <div class="tabcontents" style="height: {{{height|auto}}}; {{#if:{{{header|}}}|padding: 4px; border:2px solid {{Color2}}; border-bottom-left-radius: 11px; border-bottom-right-radius: 11px;;}} {{{constyle|}}}"> | ||
{{Tab/Content|1|{{{default|1}}}|{{{tab1|}}}|{{{content1}}}}} | {{Tab/Content|1|{{{default|1}}}|{{{tab1|}}}|{{{content1}}}}} | ||
{{Tab/Content|2|{{{default}}}|{{{tab2|}}}|{{{content2}}}}} | {{Tab/Content|2|{{{default}}}|{{{tab2|}}}|{{{content2}}}}} | ||
| Line 35: | Line 37: | ||
{{Tab/Content|15|{{{default}}}|{{{tab15|}}}|{{{content15}}}}} | {{Tab/Content|15|{{{default}}}|{{{tab15|}}}|{{{content15}}}}} | ||
</div> | </div> | ||
|}<noinclude> | |||
==Purpose== | ==Purpose== | ||
This template is a tool to create navigation templates with a tabbed layout. This condenses the overall size of the navigation template but still offers everything in it. This makes navigation 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 | This template is a tool to create navigation templates with a tabbed layout. This condenses the overall size of the navigation template but still offers everything in it. This makes navigation 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== | ==Usage== | ||
| Line 73: | Line 75: | ||
'''constyle''': CSS styles to be applied to the content 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 | '''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 <nowiki>"link="</nowiki> 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.)'' | '''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== | ==Examples== | ||
To see examples of using this template, see the templates: | |||
==Origins== | ==Origins== | ||
This template [[zeldawiki:Template:Tab|originated]] from [[zeldawiki:Main Page|Zelda Wiki]]. | This template [[zeldawiki:Template:Tab|originated]] from [[zeldawiki:Main Page|Zelda Wiki]]. | ||
Revision as of 17:17, 7 May 2021
|
{{{tab1}}} {{{tab2}}} {{{content1}}} |
Purpose
This template is a tool to create navigation templates with a tabbed layout. This condenses the overall size of the navigation template but still offers everything in it. This makes navigation 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. This template should usually only be to create navigation boxes. To use this template, start with this layout:
{{Tab
|header=
|default=
|width=
|height=
|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.)
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
To see examples of using this template, see the templates:
Origins
This template originated from Zelda Wiki.
