Navigation
Switcher
Bee Gees Fan List 1,977
x
23
1
<div class="lastUnit size1of1 header overflow-visible selfclear">
2
<h1 class="selfclear">
3
<span class="title" title="listName">listName</span>
4
<a class="sub-count" href="#" title="View all subscribers in this list">1,977</a>
5
</h1>
6
<ul class="hover-list">
7
<li>
8
<a href="javascript:;">Switch list</a>
9
<ul class="switcher">
10
<li>
11
<a href="#">List 1</a>
12
</li>
13
<li>
14
<a href="#">List 2</a>
15
</li>
16
<li>
17
<a href="#">List 3</a>
18
</li>
19
</ul>
20
</li>
21
</ul>
22
</div>
23
A switcher is used in lists, campaigns and reports dashboard page headers to quickly navigate to a different list, campaign, or report, respectively.
Tabs
Tab One
Tab Two
Tab Three
Tab1: Column 1
Column 2
Tab2: Column 1
Column 2
Tab3: Column 1
Column 2
x
49
1
<div class="line main-section dijit-tabs">
2
<div class="lastUnit size1of1">
3
<div data-dojo-type="dijit/layout/TabContainer" dolayout="false">
4
<div class="unit size1of1" data-dojo-type="dijit/layout/ContentPane" title="Tab One" data-dojo-props="selected:true">
5
<div class="lastGroup size1of1">
6
<div class="sub-section">
7
<div class="unit size1of2 maintain-width">
8
<h4>Tab1: Column 1
9
</h4>
10
</div>
11
<div class="lastUnit size1of2">
12
<h4>Column 2
13
</h4>
14
</div>
15
</div>
16
</div>
17
</div>
18
<div data-dojo-type="dijit/layout/ContentPane" title="Tab Two">
19
<div class="lastGroup size1of1">
20
<div class="sub-section">
21
<div class="unit size1of2 maintain-width">
22
<h4>Tab2: Column 1
23
</h4>
24
</div>
25
<div class="lastUnit size1of2">
26
<h4>Column 2
27
</h4>
28
</div>
We have re-styled Dijit's tab container and content panes. Use dijit-tabs
container as a wrapper for the TabContainer and use lastGroup
for wrapping the tab contents inside the ContentPane.
This will ensure that the unit
and lastUnit
classes will not add extra padding inside the tab contents.