Difference between revisions of "Template:Panels"
From From The Ashes Wiki
(6 intermediate revisions by the same user not shown) | |||
Line 11: | Line 11: | ||
padding-top: 4em; | padding-top: 4em; | ||
} | } | ||
− | + | .tab_1 { | |
order: 0; | order: 0; | ||
} | } | ||
Line 21: | Line 21: | ||
padding: 0 1em; | padding: 0 1em; | ||
} | } | ||
− | .tab_1.tab a, . | + | .tab_1.tab a, .anchor:target + .tab a { |
opacity: 1; | opacity: 1; | ||
} | } | ||
Line 30: | Line 30: | ||
width: 100%; | width: 100%; | ||
} | } | ||
− | # | + | #content_1 { |
display: block; | display: block; | ||
} | } | ||
− | :target ~ # | + | :target ~ #content_1, .anchor { |
display: none; | display: none; | ||
} | } | ||
Line 39: | Line 39: | ||
| key | | key | ||
| value | | value | ||
− | | {{#ifexpr:{{#var: key}}>1|, .tab_{{#var: key}}:target ~ # | + | | {{#ifexpr:{{#var: key}}>1|, .tab_{{#var: key}}:target ~ #content_{{#var: key}}|.tab_1:target ~ #content_1}} |
}}{ | }}{ | ||
display: block; | display: block; | ||
Line 48: | Line 48: | ||
| value | | value | ||
| {{#ifexpr:{{#var: key}}>1|<div id="tab_{{#var: key}}" class="tab_{{#var: key}} anchor" tabindex="0"></div>|}} | | {{#ifexpr:{{#var: key}}>1|<div id="tab_{{#var: key}}" class="tab_{{#var: key}} anchor" tabindex="0"></div>|}} | ||
− | {{#ifexpr:{{#var: key}}>1|<div class="tab_{{#var: key}} tab" tabindex="0">[[#tab_{{#var: key}}|{{{tab_{{#var: key}}}}}]] | + | {{#ifexpr:{{#var: key}}>1|<div class="tab_{{#var: key}} tab" tabindex="0">[[#tab_{{#var: key}}|{{{tab_{{#var: key}}}}}]]</div>|}} |
}} | }} | ||
<div id="tab_1" class="tab_1 anchor" tabindex="0"></div> | <div id="tab_1" class="tab_1 anchor" tabindex="0"></div> | ||
− | <div class="tab_1 tab" tabindex="0">[[#tab_1|{{{tab_1}}}]] | + | <div class="tab_1 tab" tabindex="0">[[#tab_1|{{{tab_1}}}]]</div> |
{{#forargs: tab_ | {{#forargs: tab_ | ||
| key | | key | ||
| value | | value | ||
− | | <div id=" | + | | <div id="content_{{#var: key}}" class="panel">{{{content_{{#var: key}}}}}</div> |
}} | }} | ||
</div></includeonly><noinclude> | </div></includeonly><noinclude> | ||
Line 69: | Line 69: | ||
}}</pre> | }}</pre> | ||
− | You can as many tabs/panels as you like, tab_1 through tab_N, but you don't need more than two (well, technically you only need one, but then why bother?). It may also get cluttered if you have too many tabs, but that's a matter of taste. | + | You can have as many tabs/panels as you like, tab_1 through tab_N, but you don't need more than two (well, technically you only need one, but then why bother?). It may also get cluttered if you have too many tabs, but that's a matter of taste. |
+ | |||
+ | content_# can be as complicated as you like, as long as nothing is left open — with one major exception. Wiki table markup will not work in this template. If you want a table in one section, you have three options: | ||
+ | |||
+ | # Use [[Template:Table]] — instructions on that page, but it's fairly simple. | ||
+ | # Use html; i.e., <nowiki><table><tr><td>First Cell</td><td>Second Cell</td></tr></table></nowiki>, etc. | ||
+ | # In the content slot you want, call a subpage, such as <nowiki>{{:{{PAGENAME}}/Contacts}}</nowiki> — you can put a wiki-markup table in that subpage and it will work fine. (n.b.: <nowiki>{{PAGENAME}}</nowiki> there is not a placeholder.) | ||
+ | |||
+ | The appearance can be adjusted more by writing custom css. | ||
[[Category: Template]] | [[Category: Template]] | ||
</noinclude> | </noinclude> |
Latest revision as of 19:18, 4 May 2018
Usage
{{Panels |tab_1 = name of tab (i.e., Something) |content_1 = contents of panel (i.e., Here's some content about something.) |tab_2 = name of tab (i.e., Another Thing) |content_2 = contents of panel (i.e., Content about this other thing.) [...] |tab_N = name of tab (i.e., Something Else) |content_N = contents of panel (i.e., Some information for this last thing too.) }}
You can have as many tabs/panels as you like, tab_1 through tab_N, but you don't need more than two (well, technically you only need one, but then why bother?). It may also get cluttered if you have too many tabs, but that's a matter of taste.
content_# can be as complicated as you like, as long as nothing is left open — with one major exception. Wiki table markup will not work in this template. If you want a table in one section, you have three options:
- Use Template:Table — instructions on that page, but it's fairly simple.
- Use html; i.e., <table><tr><td>First Cell</td><td>Second Cell</td></tr></table>, etc.
- In the content slot you want, call a subpage, such as {{:{{PAGENAME}}/Contacts}} — you can put a wiki-markup table in that subpage and it will work fine. (n.b.: {{PAGENAME}} there is not a placeholder.)
The appearance can be adjusted more by writing custom css.