Actions

Template

Difference between revisions of "Tabs"

From Sonic Retro

Line 18: Line 18:
 
   #if:{{{icon10|{{{title10|}}}}}}|<li>{{{icon10|{{{title10|}}}}}}</li>}}
 
   #if:{{{icon10|{{{title10|}}}}}}|<li>{{{icon10|{{{title10|}}}}}}</li>}}
 
</ul>
 
</ul>
</div>}}
+
</div>}}{{#vardefine:tabcontent|<div class="poot-tabs-content">
{{#vardefine:tabcontent|<div class="poot-tabs-content">
 
 
<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 08:40, 9 September 2022

Usage

Vertical

{{tabs
| title=vertical tabs
| icon1=tab 1
| icon2=tab 2
| icon3=tab 3
| icon4=tab 4
| icon5=tab 5
| content1=content of tab 1
| content2=things in second tab
| content3=another tab content
| content4=content of tab 4
| content5=content of tab 5
| orientation=vertical
}}
[hide]vertical tabs
show;hide
  • 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

{{tabs
| hidetitle=yes
| icon1=tab 1
| icon2=tab 2
| icon3=[[file:Logo-md.png|link=]]
| content1=aaa
| content2=things in second tab[[file:Notavailable.svg]]
| content3=another tab content
| orientation=horizontal
| width=500px
| tabliststyle=margin-bottom:0px;
}}
show;hide
  • tab 1
  • tab 2
  • Logo-md.png
aaa
things in second tabNotavailable.svg
another tab content

Horizontal (flipped)

{{tabs
| hidetitle=yes
| icon1=tab 1
| icon2=tab 2
| icon3=[[file:Logo-md.png|link=]]
| content1=aaa
| content2=things in second tab[[file:Notavailable.svg]]
| content3=another tab content
| orientation=horizontal
| width=500px
| tabliststyle=margin-top:0px;
| flipped=yes
}}
show;hide
aaa
things in second tabNotavailable.svg
another tab content
  • tab 1
  • tab 2
  • Logo-md.png