Difference between revisions of "Tabs"

From Sega Retro

Line 3: Line 3:
 
<div class="poot-tabs-title breakout"><span class="poot-tabs-titletext">{{{title|}}}</span></div>
 
<div class="poot-tabs-title breakout"><span class="poot-tabs-titletext">{{{title|}}}</span></div>
 
}}
 
}}
<div class="poot-tabs" style="width:auto; border:0px solid pink; padding:0px; {{#switch:{{{orientation|}}}
+
<div class="poot-tabs" role="tablist" style="width:auto; border:0px solid pink; padding:0px; {{#switch:{{{orientation|}}}
 
| horizontal=text-align:center;
 
| horizontal=text-align:center;
 
| float:left;
 
| float:left;
Line 15: Line 15:
 
</ul>
 
</ul>
 
</div>
 
</div>
<div class="poot-tabs-content" style="width:auto; border:0px solid orange;">
+
<div class="poot-tabs-content" role="tabpanel" style="width:auto; border:0px solid orange;">
 
<div class="poot-tabs-selected">{{{content1}}}</div>
 
<div class="poot-tabs-selected">{{{content1}}}</div>
 
{{#if:{{{icon2|{{{title2|}}}}}}|<div>{{{content2}}}</div>}}{{
 
{{#if:{{{icon2|{{{title2|}}}}}}|<div>{{{content2}}}</div>}}{{

Revision as of 12:37, 12 September 2020

Usage

Vertical

vertical tabs
  • tab 1
  • tab 2
  • tab 3
  • tab 4
  • tab 5
content of tab 1
things in second tab
another tab content
content of tab 4
content of tab 5

Horizontal

  • tab 1
  • tab 2
  • Logo-md.png
aaa
things in second tabNotavailable.svg
another tab content