editor
698
edits
TabsExample: Difference between revisions
m
clean up, typos fixed: Seperate → Separate (8), condtions → conditions
(Created page with "This page contains documentation and demos for the tabs extension. Paste this text on a wiki article with the tabs extension installed to view these demos. ----- {{TOC|limit...") |
m (clean up, typos fixed: Seperate → Separate (8), condtions → conditions) |
||
|
to view these demos.
{{TOC|limit=4}}
You can create a simple collapsible box by enclosing some content between <code><nowiki><tab> ... </tab></nowiki></code>. All content within the tags will be displayed within the toggle box.
===== Available attributes
*<code>collapsed</code> - If this attribute is set, the toggle box will appear collapsed when the page loads. Otherwise it will be opened.
*<code>inline</code> - If this attribute is set, the toggle box can be placed within text without interrupting the flow of the text.
Dropdown menus will convert all list items and links placed within to specially styled list items. The only exception is that links show as they normally do when placed within unordered lists ([http://www.mediawiki.org/wiki/Help:Lists any line starting with <code>*</code>]). This is also the only difference between ordered and unordered lists.
Any nested lists will be rendered as sub-menus in the dropdown menu. Nested lists are created by starting a line with [http://www.mediawiki.org/wiki/Help:Lists multiple <code>*</code> or <code>#</code> characters]. There is one limitation with this however: Individual nested lists can not alternate between ordered and unordered lists.
<pre>
*Menu item 1
</pre>
===== Available attributes
*All attributes that are available for toggle boxes
*<code>dropdown</code> - Must be defined for the toggle box to become a dropdown menu.
*<code>openname</code> and <code>closename</code> - These attributes are identical to the <code>name</code> attribute in dropdown menus. It is not possible to let the dropdown switch between 2 values. If the <code>openname</code> attribute is set, that value will be used as label, otherwise the <code>closename</code> value is used, and if neither of those values is set, the <code>name</code> value is used.
*<code>bgcolor</code> - Because of how the background-color styling for dropdown works (background styles are applied to all items within dropdowns, otherwise they would become transparent), background colors need to be defined
==== Dropdown demos ====
#Each of the defined names will be set as <code>name</code> or <code>index</code> attributes, respectively.
#*All values that are numbers only will be automatically recognised as indices. For indices, surrounding whitespace is allowed, but internal whitespace or any non-number characters such as decimal points aren't.
#*If these
#*If the entered value contains only whitespace or is left empty, the index of that tab within the parser function is assumed.
#No indices or names are defined here, so the indices of the tabs within the parser functions are automatically assigned as index.
<tab name="Second" style="background:salmon;">This tab also has a defined <code>name</code> attribute, and its <code>style</code> attribute set to <code>style="background:salmon;"</code>.</tab>
<tab>This tab has no attributes defined. Its name is automatically generated based on its position.</tab>
<tab index="1">This is a
<tab name="Second">This is a
----
This line of text will show for every tab you view. It is not placed within <code><tab> tags, and can be used as default content for the tab menu.
<tab name="Inline" style="background:salmon;">Third tab.</tab>
<tab name="Block" style="background:royalblue;">Fourth tab.</tab>
<tab index="1">This is a
<tab index="2">This
<tab index="3" inline>This is a
<tab index="4" block>Despite fitting on the previous line, the <code>block</code> attribute forces this
</tabs>
| |||