Difference between revisions of "WIP/Tabs"

From LinnDocs
Jump to: navigation, search
(Created page with "<tabs> <tab name="Foo">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</tab> <tab name="Bar">Lorem...")
 
m
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<tabs>
+
A<tabs inline>
−
<tab name="Foo">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</tab>
+
<tab name="Foo">[https://www.mediawiki.org/wiki/Extension:Tabs/Usage MediaWiki usage].</tab>
 
<tab name="Bar">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</tab>
 
<tab name="Bar">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</tab>
 
<tab name="Baz">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</tab>
 
<tab name="Baz">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</tab>
 +
</tabs>b
 +
 +
 +
Can this be between <tab name="Stationery" dropdown inline>
 +
* [https://www.mediawiki.org/wiki/Extension:Tabs/Usage MediaWiki usage].
 +
* <nowiki>[[Letterheads]]</nowiki>
 +
* <nowiki>[[Envelopes]]</nowiki>
 +
</tab> text?
 +
 +
 +
<tab openname=" Linn Klimax DSM  variants: "  closename="Klimax DSM" dropdown inline style="width:200pt" bgcolor="white">
 +
<u> KLIMAX DSM</u>
 +
* [[Klimax_DSM_/0 (2011 Variant) | Klimax DSM/0 (2011 Variant)]]<br>
 +
*  [[Klimax_DSM_/1_(2014_Variant) | Klimax DSM/1 (2014 Variant)]]<br>
 +
*  [[Klimax_DSM_/2_(2016-2018_Variant) | Klimax DSM/2 (2016 Variant)]]
 +
* [[Klimax_DSM_/3_(2020_Variant) | Klimax DSM/3 (2020 Variant)]]
 +
<br>
 +
<u> KLIMAX '''EXAKT''' DSM</u>
 +
* [[Klimax_Exakt_DSM_/0_(2013_Variant) | Klimax Exakt DSM (2013 Variant)]]<br>
 +
* [[Klimax_Exakt_DSM_/1_(2016-2018_Variant)| Klimax Exakt DSM/1 (2016 Variant)]]<br>
 +
</tab>
 +
 +
Can this be between <tab name="Stationery" inline>
 +
* [https://www.mediawiki.org/wiki/Extension:Tabs/Usage MediaWiki usage].
 +
* <nowiki>[[Letterheads]]</nowiki>
 +
* <nowiki>[[Envelopes]]</nowiki>
 +
</tab> text?
 +
 +
 +
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>
 +
 +
<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>
 +
<tab name="Default 1" style="background:lightgreen;">First tab.</tab>
 +
<tab name="Default 2" style="background:lightgreen;">Second tab.</tab>
 +
<tab name="Inline" style="background:salmon;">Third tab.</tab>
 +
<tab name="Block" style="background:royalblue;">Fourth tab.</tab>
 +
<tab index="1">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.</tab>
 +
<tab index="2">This seperate tab isn't forced to a new line, since it's short enough.</tab>
 +
<tab index="3" inline>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.</tab>
 +
<tab index="4" block>Despite fitting on the previous line, the block attribute forces this seperate tab to a new line</tab>
 
</tabs>
 
</tabs>
 +
 +
<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)
  Majik DSM /4 (2020 Variant)
  Selekt DSM /0
  Selekt DSM /0 Classic Hub
  Selekt DSM /1 Edition Hub

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"