Difference between revisions of "WIP/Tabs"

From LinnDocs
Jump to: navigation, search
m
m
 
Line 13: Line 13:
  
  
−
<tab name=" Linn Klimax DSM  variants: " dropdown inline style="width:200pt" bgcolor="white">  
+
<tab openname=" Linn Klimax DSM  variants: "  closename="Klimax DSM" dropdown inline style="width:200pt" bgcolor="white">  
 
<u> KLIMAX DSM</u>
 
<u> KLIMAX DSM</u>
 
* [[Klimax_DSM_/0 (2011 Variant) | Klimax DSM/0 (2011 Variant)]]<br>
 
* [[Klimax_DSM_/0 (2011 Variant) | Klimax DSM/0 (2011 Variant)]]<br>
Line 33: Line 33:
  
 
These are the {{#tab:| <categorytree mode="all" >Airplay 2</categorytree><tab />}} products
 
These are the {{#tab:| <categorytree mode="all" >Airplay 2</categorytree><tab />}} products
 +
These are the<tab dropdown inline>
 +
*You can do anything you'd normally do in a dropdown
 +
*This box will fit in with the text.
 +
</tab> Product
  
 +
<tab dropdown bgcolor="salmon}body{font-weight:bold;">
 +
This tab has a its bgcolor attribute set to bgcolor="salmon".
 +
Just defining a background-color style would not work.
 +
</tab>
  
−
These are the {{#tab:| 1|2|3}} products
+
<tab dropdown>
 +
*This dropdown menu demonstrates dropdown menus with multiple levels.
 +
*Hovering over a list item with further lists nested within it will cause the next level to show up
 +
*Hover over this item to see
 +
**This list now shows up.
 +
**Nested lists can also contain even more lists
 +
**See this item for example
 +
***This is a third level menu
 +
**This can go on for any amount of levels.
 +
*Multiple sub-menus are also allowed
 +
**Such as this one.
 +
</tab>
  
 
<tabs>
 
<tabs>
Line 48: Line 67:
 
</tabs>
 
</tabs>
  
−
{|class="wikitable" !style="width: 50%"|Code !style="width: 50%"|Description |- |{{#tab:name1/#1, name2/#2, etc|content 1|content 2|etc}} |Each of the defined names will be set as name or index attributes, respectively. *All values that are prefixed with #, and are numbers only will be 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 condtions are not met, the entered value is interpreted as a name. *If the entered value contains only whitespace or is left empty, the index of that tab is automatically calculated. |- |{{#tab:|content 1|content 2|etc}} |No indices or names are defined here, so the indices of the tabs within the parser functions are automatically assigned as index. |- |{{#tab:name1/#1, , name3/#3, name4/#4|content 1|content 2| |content 4}} |The second tab will automatically get index="2", and the third tab will have no content: *If the third tab has a name defined in the list of names, then it becomes a [[#Self-closing tabs|self-closing tag]]. *If the third tab has an index defined, this tab is skipped, and no output is generated for this tab. |- |{{#tab:name1, name2, name3...}} |This will define three tabs, "name1", "name2" and "name3" using the [[#Self-closing tabs|self-closing syntax]]. |- |{{#tab:#3, #5|content 3|content 5}} |This will add "content 3" to the rest of the contents of tab 3, and "content 5" to the rest of the content of tab 5. |- |{{#tab:name1/#1, etc|content 1|$1}} |When the content of a tab is $n (where n is the place of the tab in the parser function), the contents of that tab are copied over to the tab that has $n in it. For this to work, the following conditions must be met: *The tab must contain nothing other than a dollar sign and a number directly after it. Surrounding whitespace is allowed. *The parser function's nth parameter must be defined. n may also be bigger than the current tab index (so, {{#tab:#3,#5|$2|Hi}} would put "Hi" in both tab 3 and 5). *The parser function's nth parameter must contain something other than just whitespace. Recursive references won't work, so {{#tab:|Hi|$1|$2}} will put "Hi" in tabs 1 and 2, and the literal text "$1" in tab 3. |- |{{#tab:|3=content 3| 5 = content 5}} |You can also refer to the tab '''index''' (so not the tab name) by putting the tab index before an equals sign (=) in the parameter. This will not work for tab names, to prevent unwanted effects caused by equals signs inside the tab (which then would cause all of the preceding text to be interpreted as a tab name). This syntax will override an index or name specified using the syntax of the above code examples. |}
+
<tab dropdown>
 +
This item is in an unordered list, so it allows [[#Dropdown demos|in-line linking]].
 +
#This item and the next one are in an ordered list, so they turn links into list-items
 +
#[[#Dropdown demos|List-item links]]
 +
#...with a sub-menu that uses unordered lists again, so allows [[#Dropdown demos|in-line linking]] again.
 +
##And this sub-menu again creates...
 +
##[[#Dropdown demos|...list-item links]]
 +
</tab>

Latest revision as of 10:43, 4 August 2023

A

MediaWiki usage.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

b


Can this be between

Stationery

text?


Linn Klimax DSM variants:

KLIMAX DSM


KLIMAX EXAKT DSM

Can this be between

text?


These are the

▼ Airplay 2
  Klimax DSM /3 (2020 Variant)
  Kustom DSM
  Majik DSM /4 (2020 Variant)
  Selekt DSM /0
  Selekt DSM /0 Classic Hub
  Selekt DSM /1 Classic Hub
  Selekt DSM /1 Edition Hub
  Series 3

products These are the

Show dropdown
  • You can do anything you'd normally do in a dropdown
  • This box will fit in with the text.

Product

Show dropdown

This tab has a its bgcolor attribute set to bgcolor="salmon". Just defining a background-color style would not work.

Show dropdown
  • This dropdown menu demonstrates dropdown menus with multiple levels.
  • Hovering over a list item with further lists nested within it will cause the next level to show up
  • Hover over this item to see
    • This list now shows up.
    • Nested lists can also contain even more lists
    • See this item for example
      • This is a third level menu
    • This can go on for any amount of levels.
  • Multiple sub-menus are also allowed
    • Such as this one.
First tab.
Second tab.
Third tab.
Fourth tab.
This is a seperate tab. It demonstrates what happens if a tab has no inline or block attributes defined. If the tab contains a lot of text, it will automatically be forced to a new line, despite extra space being available at the end of the previous line.
This seperate tab isn't forced to a new line, since it's short enough.
This is a seperate tab that has an inline attribute defined. It will fit in with the text as normal text would, and it fills up any space that is left available after the previous line. This makes tabs with inline attributes a bit better at fitting in with the flow of text.
Despite fitting on the previous line, the block attribute forces this seperate tab to a new line
Show dropdown

This item is in an unordered list, so it allows in-line linking.

  1. This item and the next one are in an ordered list, so they turn links into list-items
  2. List-item links
  3. ...with a sub-menu that uses unordered lists again, so allows in-line linking again.
    1. And this sub-menu again creates...
    2. ...list-item links
Retrieved from "https://docs.linn.co.uk/wiki/index.php?title=WIP/Tabs&oldid=28516"