Difference between revisions of "Template:Panels"

From From The Ashes Wiki
Jump to: navigation, search
m
 
(5 intermediate revisions by the same user not shown)
Line 11: Line 11:
 
     padding-top: 4em;
 
     padding-top: 4em;
 
}
 
}
#tab_1 {
+
.tab_1 {
 
     order: 0;
 
     order: 0;
 
}
 
}
Line 21: Line 21:
 
     padding: 0 1em;
 
     padding: 0 1em;
 
}
 
}
.tab_1.tab a, .tab:target a {
+
.tab_1.tab a, .anchor:target + .tab a {
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
Line 30: Line 30:
 
     width: 100%;
 
     width: 100%;
 
}
 
}
#tab_1-panel {
+
#content_1 {
 
     display: block;
 
     display: block;
 
}
 
}
:target ~ #tab_1-panel, .anchor {
+
:target ~ #content_1, .anchor {
 
     display: none;
 
     display: none;
 
}
 
}
Line 39: Line 39:
 
  | key
 
  | key
 
  | value
 
  | value
  | {{#ifexpr:{{#var: key}}>1|, .tab_{{#var: key}}:target ~ #tab_{{#var: key}}-panel|.tab_1:target ~ #tab_1-panel}}
+
  | {{#ifexpr:{{#var: key}}>1|, .tab_{{#var: key}}:target ~ #content_{{#var: key}}|.tab_1:target ~ #content_1}}
 
}}{
 
}}{
 
     display: block;
 
     display: block;
Line 51: Line 51:
 
}}
 
}}
 
<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="tab_{{#var: key}}-panel" class="panel">{{{content_{{#var: key}}}}}</div>
+
  | <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. contents_# can be as complicated as you like, as long as nothing is left open. The appearance can be adjusted more by writing custom css.
+
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 &mdash; 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]] &mdash; 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> &mdash; 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:

  1. Use Template:Table — instructions on that page, but it's fairly simple.
  2. Use html; i.e., <table><tr><td>First Cell</td><td>Second Cell</td></tr></table>, etc.
  3. 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.