Difference between revisions of "Tabs"
From Sonic Retro
Scarred Sun (talk | contribs) (Created page with "<div class="poot-tabs-container poot-tabs-{{{orientation|vertical}}} {{#if:{{{collapsed|}}}|poot-tabs-collapsed|}} poot-tabs-selected-{{{selected|1}}} {{#if:{{{instant|}}}|poo...") |
|||
(5 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | <div class="poot-tabs-container poot-tabs-{{{orientation|vertical}}} {{#if:{{{collapsed|}}}|poot-tabs-collapsed|}} poot-tabs-selected-{{{selected|1}}} {{#if:{{{instant|}}}|poot-tabs-noanimations}}" style="width:{{{width|800px}}}; {{#if: {{{noalign|}}}|margin-left:0px; margin-right: 0px;|}} {{{style|}}}"> | + | <includeonly><div class="poot-tabs-container poot-tabs-{{{orientation|vertical}}} {{#if:{{{collapsed|}}}|poot-tabs-collapsed|}} poot-tabs-selected-{{{selected|1}}} {{#if:{{{instant|}}}|poot-tabs-noanimations}}" style="width:{{{width|800px}}}; border:0px; {{#if: {{{noalign|}}}|margin-left:0px; margin-right: 0px;|}} {{{style|}}}"> |
+ | {{#if: {{{hidetitle|}}} | | | ||
<div class="poot-tabs-title">{{#if:{{{name|}}} | <div class="poot-tabs-title">{{#if:{{{name|}}} | ||
| <span class="poot-tabs-navbar">{{Navbar|{{{name}}}|fontstyle={{{basestyle|}}};{{{titlestyle|}}};border:none;|mini=1}}</span> | | <span class="poot-tabs-navbar">{{Navbar|{{{name}}}|fontstyle={{{basestyle|}}};{{{titlestyle|}}};border:none;|mini=1}}</span> | ||
}}{{#ifeq:{{{state|}}}|off||<span class="poot-tabs-hidelink">[[[#top|{{#if:{{{collapsed|}}}|show|hide}}]]]</span>}}<span class="poot-tabs-titletext">{{{title}}}</span> | }}{{#ifeq:{{{state|}}}|off||<span class="poot-tabs-hidelink">[[[#top|{{#if:{{{collapsed|}}}|show|hide}}]]]</span>}}<span class="poot-tabs-titletext">{{{title}}}</span> | ||
</div> | </div> | ||
− | <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 15: | 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> | + | </div>}}{{#vardefine:tabcontent{{{level|}}}|<div class="poot-tabs-content"> |
− | <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>}}{{ |
− | </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>}} | ||
<!-- 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> | ||
− | </div> | + | {{#if:{{{flipped|}}}|{{#var:tabcontent{{{level|}}}}} |
+ | {{#var:tablist{{{level|}}}}}|{{#var:tablist{{{level|}}}}} | ||
+ | {{#var:tabcontent{{{level|}}}}}}} | ||
+ | </div>{{clearvar|tablist{{{level|}}}|tabcontent{{{level|}}}}}</includeonly><noinclude> | ||
+ | ==Usage== | ||
+ | ===Vertical=== | ||
+ | <pre>{{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 | ||
+ | }}</pre> | ||
+ | |||
+ | {{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 | ||
+ | }} | ||
+ | {{clear}} | ||
+ | ===Horizontal=== | ||
+ | <pre> | ||
+ | {{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; | ||
+ | }} | ||
+ | </pre> | ||
+ | {{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; | ||
+ | }} | ||
+ | |||
+ | ===Horizontal (flipped)=== | ||
+ | <pre>{{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 | ||
+ | }}</pre> | ||
+ | {{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 | ||
+ | }} | ||
+ | |||
+ | ===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> |
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; }}
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 }}
Tabs within tabs
show;hide
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