Difference between revisions of "Tabs"
From Sega Retro
| Line 7: | Line 7: | ||
}}"> | }}"> | ||
<ul style="list-style-type:none; {{#if:{{{tabliststyle|}}}|{{{tabliststyle}}}}}"> | <ul style="list-style-type:none; {{#if:{{{tabliststyle|}}}|{{{tabliststyle}}}}}"> | ||
| − | <li class="poot-tabs-selected" style="padding-left:4px; padding-right:4px; cursor:pointer; {{#ifeq:{{{orientation|}}}|horizontal|display:inline-block; margin-left:5px; margin-right:5px;}}">{{{icon1|{{{title1|}}}}}}</li>{{#loop:t | + | <li class="poot-tabs-selected" style="padding-left:4px; padding-right:4px; cursor:pointer; {{#ifeq:{{{orientation|}}}|horizontal|display:inline-block; margin-left:5px; margin-right:5px;{{#if:{{{selectedstyle|}}}|{{{selectedstyle|}}}|}}}}">{{{icon1|{{{title1|}}}}}}</li>{{#loop:t |
| 2 | | 2 | ||
| 20 | | 20 | ||
| − | | {{#if:{{{icon{{#var:t}}|{{{title{{#var:t}}|}}}}}}|<li style="padding-left:4px; padding-right:4px; cursor:pointer; {{#ifeq:{{{orientation|}}}|horizontal|display:inline-block; margin-left:5px; margin-right:5px;}}">{{{icon{{#var:t}}|{{{title{{#var:t}}|}}}}}}</li>}} | + | | {{#if:{{{icon{{#var:t}}|{{{title{{#var:t}}|}}}}}}|<li style="padding-left:4px; padding-right:4px; cursor:pointer; {{#ifeq:{{{orientation|}}}|horizontal|display:inline-block; margin-left:5px; margin-right:5px;{{#if:{{{notselectedstyle|}}}|{{{notselectedstyle|}}}|}}}}">{{{icon{{#var:t}}|{{{title{{#var:t}}|}}}}}}</li>}} |
}} | }} | ||
</ul> | </ul> | ||
Revision as of 16:00, 22 April 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
}}
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
{{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;
}}
- 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
}}
aaa
things in second tab
another tab content
- tab 1
- tab 2