- Home
- Smart Design
- Component
- PC
- Tab
Tab
- This page is about tabs and how to use them.
Type
Default
Each tab has a minimum width of 168px, and up to 4 tabs can be used.
Tab’s width will also change depending on the length of the text.
Page movement for default type is synchronous.
Refer to ‘Move content on page’ for asynchronous loading.
xxxxxxxxxx1
<div class="ec-base-tab">2
<ul class="menu">3
<li class="selected"><a href="#none">Tab1</a></li>4
<li><a href="#none">Tab2</a></li>5
</ul>6
</div>Line
Uses same structure as default type, but the selected tab color is different.
Similarly, line type tabs can also use the adjustable-width type grid class.
xxxxxxxxxx1
<div class="ec-base-tab typeLight">2
<ul class="menu">3
<li class="selected"><a href="#none">Tab button 1</a></li>4
<li><a href="#none">Tab button 2</a></li>5
</ul>6
</div>Grid/Margin/Alignment
Adjustable width
Use this to arrange full-width page menus.
Vertically aligns to center when text is too long.
xxxxxxxxxx1
</p>2
<!--Tab (2) -->3
<div class="ec-base-tab grid2">4
<ul class="menu">5
<li class="selected"><a href="#none">grid2</a></li>6
<li><a href="#none">Tab 2</a></li>7
</ul>8
</div>9
<!--Tab (3) -->10
<div class="ec-base-tab grid3">11
<ul class="menu">12
<li class="selected"><a href="#none">grid3</a></li>13
<li><a href="#none">Tab 2</a></li>14
<li><a href="#none">Tab 3</a></li>15
</ul>16
</div>17
<!--Tab (4) -->18
<div class="ec-base-tab grid4">19
<ul class="menu">20
<li class="selected"><a href="#none">grid4</a></li>21
<li><a href="#none">Tab 2</a></li>22
<li><a href="#none">Tab 3</a></li>23
<li><a href="#none">Tab 4</a></li>24
</ul>25
</div>26
<!-- Tab (5) -->27
<div class="ec-base-tab grid5">28
<ul class="menu">29
<li class="selected"><a href="#none">grid5</a></li>30
<li><a href="#none">Tab 2</a></li>31
<li><a href="#none">Tab 3</a></li>32
<li><a href="#none">Tab 4</a></li>33
<li><a href="#none">Tab 5</a></li>34
</ul>35
</div>36
<!-- Tab (6) -->37
<div class="ec-base-tab grid6">38
<ul class="menu">39
<li class="selected"><a href="#none">grid6</a></li>40
<li><a href="#none">Tab 2</a></li>41
<li><a href="#none">Tab 3</a></li>42
<li><a href="#none">Tab 4</a></li>43
<li><a href="#none">Tab 5</a></li>44
<li><a href="#none">Tab 6</a></li>45
</ul>46
</div>47
<!-- Tab (7) -->48
<div class="ec-base-tab grid7">49
<ul class="menu">50
<li class="selected"><a href="#none">grid7</a></li>51
<li><a href="#none">Tab 2</a></li>52
<li><a href="#none">Tab 3</a></li>53
<li><a href="#none">Tab 4</a></li>54
<li><a href="#none">Tab 5</a></li>55
<li><a href="#none">Tab 6</a></li>56
<li><a href="#none">Text will split into two lines if it is too long</a></li>57
</ul>Application
Button/Message
Add buttons or messages to your tab menus.
xxxxxxxxxx1
<!--Tab menu + button-->2
<div class="ec-base-tab">3
<ul class="menu">4
<li class="selected"><a href="#none">Tab menu1</a></li>5
<li><a href="#none">Tab menu2</a></li>6
</ul>7
<span class="right"><a href="#none" class="btnNormal">Additional information</a></span>8
</div>9
<!-- Tab menu + message-->10
<div class="ec-base-tab typeLight">11
<ul class="menu">12
<li class="selected"><a href="#none">Tab menu1</a></li>13
<li><a href="#none">Tab menu2</a></li>14
</ul>15
<span class="right">Notification</span>16
</div>Move content in page
Load JS control properties for visible/hidden content.
Use this to move content inside a page.
xxxxxxxxxx1
<!--Load page asynchronously: default type-->2
<div class="ec-base-tab eTab">3
<ul class="menu">4
<li class="selected"><a href="#tabCont1_1">Tab 1</a></li>5
<li><a href="#tabCont1_2">Tab2</a></li>6
</ul>7
<div id="tabCont1_1" class="tabCont" style="display:block;">8
Content field for tab 1.9
</div>10
<div id="tabCont1_2" class="tabCont" style="display:none;">11
Content field for tab 2.12
</div>13
</div>14
<!--Load page asynchronously: line type-->15
<div class="ec-base-tab typeLight eTab">16
<ul class="menu">17
<li class="selected"><a href="#tabCont1_1">Tab 1</a></li>18
<li><a href="#tabCont1_2">Tab 2</a></li>19
</ul>20
<div id="tabCont1_1" class="tabCont" style="display:block;">21
Content field for tab 1.22
</div>23
<div id="tabCont1_2" class="tabCont" style="display:none;">24
Content field for tab 2.25
</div>26
</div>Next page
How helpful was this page?
0Character Input /Up to 300 characters