Difference between revisions of "Tabs"
From Sega Retro
| 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: | + | <div class="poot-tabs" style="width:auto; border:0px solid pink; padding:0px; {{#switch:{{{orientation|}}} |
| horizontal=text-align:center; | | horizontal=text-align:center; | ||
| float:left; | | float:left; | ||
}}"> | }}"> | ||
| − | <ul style="list-style-type:none;"> | + | <ul style="list-style-type:none; {{#ifeq:{{{orientation|}}}|horizontal|margin-bottom:0px;}}"> |
<li class="poot-tabs-selected" style="padding-left:4px; padding-right:4px; {{#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; {{#ifeq:{{{orientation|}}}|horizontal|display:inline-block; margin-left:5px; margin-right:5px;}}">{{{icon1|{{{title1|}}}}}}</li>{{#loop:t | ||
| 2 | | 2 | ||
Revision as of 14:21, 27 July 2018
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
horizontal tabs
- tab 1
- tab 2
- tab 3
aaa
things in second tab
another tab content