Actions

Template

Difference between revisions of "Tabs"

From Sonic Retro
 
(One intermediate revision by one other user not shown)
Line 5: Line 5:
 
  }}{{#ifeq:{{{state|}}}|off||<span class="poot-tabs-hidelink">&#91;[[#top|{{#if:{{{collapsed|}}}|show|hide}}]]&#93;</span>}}<span class="poot-tabs-titletext">{{{title}}}</span>
 
  }}{{#ifeq:{{{state|}}}|off||<span class="poot-tabs-hidelink">&#91;[[#top|{{#if:{{{collapsed|}}}|show|hide}}]]&#93;</span>}}<span class="poot-tabs-titletext">{{{title}}}</span>
 
  </div>
 
  </div>
−
}}{{#vardefine:tablist|<div class="poot-tabs">
+
}}{{#vardefine:tablist{{{level|}}}|<div class="poot-tabs">
 
<ul>
 
<ul>
 
<li class="poot-tabs-selected">{{{icon1|{{{title1|}}}}}}</li>
 
<li class="poot-tabs-selected">{{{icon1|{{{title1|}}}}}}</li>
Line 16: Line 16:
 
   #if:{{{icon8|{{{title8|}}}}}}|<li>{{{icon8|{{{title8|}}}}}}</li>}}{{
 
   #if:{{{icon8|{{{title8|}}}}}}|<li>{{{icon8|{{{title8|}}}}}}</li>}}{{
 
   #if:{{{icon9|{{{title9|}}}}}}|<li>{{{icon9|{{{title9|}}}}}}</li>}}{{
 
   #if:{{{icon9|{{{title9|}}}}}}|<li>{{{icon9|{{{title9|}}}}}}</li>}}{{
−
   #if:{{{icon10|{{{title10|}}}}}}|<li>{{{icon10|{{{title10|}}}}}}</li>}}
+
   #if:{{{icon10|{{{title10|}}}}}}|<li>{{{icon10|{{{title10|}}}}}}</li>}}{{
 +
  #if:{{{icon11|{{{title11|}}}}}}|<li>{{{icon11|{{{title11|}}}}}}</li>}}{{
 +
  #if:{{{icon12|{{{title12|}}}}}}|<li>{{{icon12|{{{title12|}}}}}}</li>}}{{
 +
  #if:{{{icon13|{{{title13|}}}}}}|<li>{{{icon13|{{{title13|}}}}}}</li>}}{{
 +
  #if:{{{icon14|{{{title14|}}}}}}|<li>{{{icon14|{{{title14|}}}}}}</li>}}{{
 +
  #if:{{{icon15|{{{title15|}}}}}}|<li>{{{icon15|{{{title15|}}}}}}</li>}}{{
 +
  #if:{{{icon16|{{{title16|}}}}}}|<li>{{{icon16|{{{title16|}}}}}}</li>}}{{
 +
  #if:{{{icon17|{{{title17|}}}}}}|<li>{{{icon17|{{{title17|}}}}}}</li>}}{{
 +
  #if:{{{icon18|{{{title18|}}}}}}|<li>{{{icon18|{{{title18|}}}}}}</li>}}{{
 +
  #if:{{{icon19|{{{title19|}}}}}}|<li>{{{icon19|{{{title19|}}}}}}</li>}}{{
 +
  #if:{{{icon20|{{{title20|}}}}}}|<li>{{{icon20|{{{title20|}}}}}}</li>}}
 
</ul>
 
</ul>
−
</div>}}{{#vardefine:tabcontent|<div class="poot-tabs-content">
+
</div>}}{{#vardefine:tabcontent{{{level|}}}|<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>}}{{
Line 28: Line 38:
 
   #if:{{{icon8|{{{title8|}}}}}}|<div>{{{content8}}}</div>}}{{
 
   #if:{{{icon8|{{{title8|}}}}}}|<div>{{{content8}}}</div>}}{{
 
   #if:{{{icon9|{{{title9|}}}}}}|<div>{{{content9}}}</div>}}{{
 
   #if:{{{icon9|{{{title9|}}}}}}|<div>{{{content9}}}</div>}}{{
−
   #if:{{{icon10|{{{title10|}}}}}}|<div>{{{content10}}}</div>}}
+
   #if:{{{icon10|{{{title10|}}}}}}|<div>{{{content10}}}</div>}}{{
 +
  #if:{{{icon11|{{{title11|}}}}}}|<div>{{{content11}}}</div>}}{{
 +
  #if:{{{icon12|{{{title12|}}}}}}|<div>{{{content12}}}</div>}}{{
 +
  #if:{{{icon13|{{{title13|}}}}}}|<div>{{{content13}}}</div>}}{{
 +
  #if:{{{icon14|{{{title14|}}}}}}|<div>{{{content14}}}</div>}}{{
 +
  #if:{{{icon15|{{{title15|}}}}}}|<div>{{{content15}}}</div>}}{{
 +
  #if:{{{icon16|{{{title16|}}}}}}|<div>{{{content16}}}</div>}}{{
 +
  #if:{{{icon17|{{{title17|}}}}}}|<div>{{{content17}}}</div>}}{{
 +
  #if:{{{icon18|{{{title18|}}}}}}|<div>{{{content18}}}</div>}}{{
 +
  #if:{{{icon19|{{{title19|}}}}}}|<div>{{{content19}}}</div>}}{{
 +
  #if:{{{icon20|{{{title20|}}}}}}|<div>{{{content20}}}</div>}}
 
</div>}}
 
</div>}}
 
<!-- Poot translation switching here so that the text inside poot-tabs-showhide says "show;hide" (with this format) in the current language) -->
 
<!-- Poot translation switching here so that the text inside poot-tabs-showhide says "show;hide" (with this format) in the current language) -->
 
<div class="poot-tabs-showhide">show;hide</div>
 
<div class="poot-tabs-showhide">show;hide</div>
−
{{#if:{{{flipped|}}}|{{#var:tabcontent}}
+
{{#if:{{{flipped|}}}|{{#var:tabcontent{{{level|}}}}}
−
{{#var:tablist}}|{{#var:tablist}}
+
{{#var:tablist{{{level|}}}}}|{{#var:tablist{{{level|}}}}}
−
{{#var:tabcontent}}}}
+
{{#var:tabcontent{{{level|}}}}}}}
−
</div>{{clearvar|tablist|tabcontent}}</includeonly><noinclude>
+
</div>{{clearvar|tablist{{{level|}}}|tabcontent{{{level|}}}}}</includeonly><noinclude>
 
==Usage==
 
==Usage==
 
===Vertical===
 
===Vertical===
Line 122: Line 142:
 
| tabliststyle=margin-top:0px;
 
| tabliststyle=margin-top:0px;
 
| flipped=yes
 
| flipped=yes
 +
}}
 +
 +
===Tabs within tabs===
 +
{{tabs
 +
| hidetitle=yes
 +
| icon1=[[file:Logo-md.png|link=]]{{#var:level}}
 +
| icon2=[[file:Logo-gg.png|link=]]
 +
| icon3=[[file:Logo-sat.png|link=]]
 +
| content1={{tabs
 +
| hidetitle=yes
 +
| level=2
 +
| icon1=JP
 +
| icon2=US
 +
| icon3=UK
 +
| icon4=KR
 +
| content1=screen1
 +
| content2=screen2
 +
| content3=screen3
 +
| content4=screen4
 +
| orientation=horizontal
 +
| width=500px
 +
 +
}}
 +
| content2={{tabs
 +
| hidetitle=yes
 +
| level=2
 +
| icon1=JP
 +
| icon2=US
 +
| icon3=UK
 +
| icon4=KR
 +
| content1=screen5
 +
| content2=screen6
 +
| content3=screen7
 +
| content4=screen8
 +
| orientation=vertical
 +
| width=500px
 +
}}
 +
| content3={{tabs
 +
| hidetitle=yes
 +
| level=2
 +
| icon1=JP
 +
| icon2=US
 +
| icon3=UK
 +
| icon4=KR
 +
| content1=screen9
 +
| content2=screen10
 +
| content3=screen11
 +
| content4=screen12
 +
| orientation=horizontal
 +
| width=500px
 +
}}
 +
| orientation=horizontal
 +
| width=500px
 +
| tabliststyle=margin:0px;
 
}}
 
}}
  
 
[[Category:Templates]]</noinclude>
 
[[Category:Templates]]</noinclude>

Latest revision as of 14:49, 20 October 2023

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

Tabs within tabs

show;hide
  • Logo-md.png
  • Logo-gg.png
  • Logo-sat.png
show;hide
  • JP
  • US
  • UK
  • KR
screen1
screen2
screen3
screen4
show;hide
  • JP
  • US
  • UK
  • KR
screen5
screen6
screen7
screen8
show;hide
  • JP
  • US
  • UK
  • KR
screen9
screen10
screen11
screen12
Retrieved from "https://info.sonicretro.org/index.php?title=Template:Tabs&oldid=365296"