Difference between revisions of "Tabs"
From NEC Retro
Ccawley2011 (talk | contribs) m |
Ccawley2011 (talk | contribs) |
||
| Line 3: | Line 3: | ||
<div class="poot-tabs-title breakout"><span class="poot-tabs-titletext">{{{title|}}}</span></div> | <div class="poot-tabs-title breakout"><span class="poot-tabs-titletext">{{{title|}}}</span></div> | ||
}} | }} | ||
| − | <div class="poot-tabs" style="width:auto; border:0px solid pink; padding:0px; {{#switch:{{{orientation|}}} | + | <div class="poot-tabs" role="tablist" style="width:auto; border:0px solid pink; padding:0px; {{#switch:{{{orientation|}}} |
| horizontal=text-align:center; | | horizontal=text-align:center; | ||
| float:left; | | float:left; | ||
| Line 10: | Line 10: | ||
<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;}}">{{{icon1|{{{title1|}}}}}}</li>{{#loop:t | ||
| 2 | | 2 | ||
| − | | | + | | 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;}}">{{{icon{{#var:t}}|{{{title{{#var:t}}|}}}}}}</li>}} | ||
}} | }} | ||
</ul> | </ul> | ||
</div> | </div> | ||
| − | <div class="poot-tabs-content" style="width:auto; border:0px solid orange;"> | + | <div class="poot-tabs-content" role="tabpanel" style="width:auto; border:0px solid orange;"> |
<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 25: | Line 25: | ||
#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> | ||
</div></includeonly><noinclude> | </div></includeonly><noinclude> | ||
| Line 58: | Line 68: | ||
| tabliststyle=margin-bottom:0px; | | tabliststyle=margin-bottom:0px; | ||
}} | }} | ||
| + | |||
[[Category:NEC Retro templates]]</noinclude> | [[Category:NEC Retro templates]]</noinclude> | ||
Revision as of 16:15, 31 December 2021
Usage
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
- tab 1
- tab 2
aaa
things in second tab
another tab content