Difference between revisions of "Tabs"
From Sonic Retro
| 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}}}; border:0px; {{#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|}}} | | | {{#if: {{{hidetitle|}}} | | | ||
<div class="poot-tabs-title">{{#if:{{{name|}}} | <div class="poot-tabs-title">{{#if:{{{name|}}} | ||
| Line 5: | Line 5: | ||
}}{{#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> | ||
| − | }} | + | }}{{#vardefine:tablist|<div class="poot-tabs"> |
| − | <div class="poot-tabs"> | ||
<ul> | <ul> | ||
<li class="poot-tabs-selected">{{{icon1|{{{title1|}}}}}}</li> | <li class="poot-tabs-selected">{{{icon1|{{{title1|}}}}}}</li> | ||
| Line 19: | Line 18: | ||
#if:{{{icon10|{{{title10|}}}}}}|<li>{{{icon10|{{{title10|}}}}}}</li>}} | #if:{{{icon10|{{{title10|}}}}}}|<li>{{{icon10|{{{title10|}}}}}}</li>}} | ||
</ul> | </ul> | ||
| − | </div> | + | </div>}} |
| − | <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>}}{{ | ||
| Line 31: | Line 30: | ||
#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> | + | </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}} |
| + | {{#var:tablist}}|{{#var:tablist}} | ||
| + | {{#var:tabcontent}}}} | ||
| + | </div>{{clearvar|tablist|tabcontent}}</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 | ||
| + | }} | ||
| + | |||
| + | [[Category:Templates]]</noinclude> | ||
Revision as of 08:32, 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
aaa
things in second tab
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 tab
another tab content
- tab 1
- tab 2