panel.left.html
4.72 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!-- panel left -->
<div data-role="panel" id="leftpanel" data-display="overlay" data-position-fixed="true" >
<div class='nd2-sidepanel-profile wow fadeInDown'>
<img class='profile-background' src="//lorempixel.com/400/200/abstract/2/" />
<div class="row">
<div class='col-xs-4 center-xs'>
<div class='box'>
<img class="profile-thumbnail" src="//lorempixel.com/200/200/people/9/" />
</div>
</div>
<div class='col-xs-8'>
<div class='box profile-text'>
<strong>Jane Doe</strong>
<span class='subline'>Super Power User</span>
</div>
</div>
</div>
</div>
<ul data-role="listview" data-inset="false">
<li data-role="list-divider">Elements</li>
</ul>
<div data-role="collapsible" data-inset="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-d" data-iconpos="right">
<h3>Basic Elements</h3>
<ul data-role="listview" data-inset="false" data-icon="false">
<li><a href="/examples/elements/text.html" data-ajax='false' data-icon="false">Text Elements</a></li>
<li><a href="/examples/elements/grid.html" data-ajax='false' data-icon="false">FlexboxGrid</a></li>
<li><a href="/examples/elements/buttons.html" data-ajax='false' data-icon="false">Buttons</a></li>
<li><a href="/examples/elements/header_footer.html" data-ajax='false'>Header & Footer</a></li>
<li><a href="/examples/elements/listviews.html" data-ajax='false'>Listviews</a></li>
<li><a href="/examples/elements/forms.html" data-ajax='false'>Forms</a></li>
<li><a href="/examples/elements/tables.html" data-ajax='false'>Tables</a></li>
<li><a href="/examples/elements/dialog_popups.html" data-ajax='false'>Dialog & Popup</a></li>
<li><a href="/examples/elements/panels.html" data-ajax='false'>Panels</a></li>
<li><a href="/examples/elements/autocomplete.html" data-ajax='false'>Autocomplete</a></li>
<li><a href="/examples/elements/collapsible_accordions.html" data-ajax='false'>Collapsible & Accordions</a></li>
</ul>
</div>
<div data-role="collapsible" data-inset="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-d" data-iconpos="right">
<h3>Extended Elements</h3>
<ul data-role="listview" data-icon="false">
<li><a href="/examples/extended/tabs.html" data-ajax='false'>Tabs</a></li>
<li><a href="/examples/extended/cards.html" data-ajax='false'>Cards</a></li>
<li><a href="/examples/extended/search.html" data-ajax='false'>Search</a></li>
<li><a href="/examples/extended/icons.html" data-ajax='false'>Icons</a></li>
<li><a href="/examples/extended/charts.html" data-ajax='false'>Charts</a></li>
<li><a href="/examples/extended/toasts.html" data-ajax='false'>Toasts</a></li>
<li><a href="/examples/extended/bottomsheet.html" data-ajax='false'>Bottom Sheets</a></li>
</ul>
</div>
<ul data-role="listview" data-inset="false">
<li data-role="list-divider">Layouts</li>
</ul>
<div data-role="collapsible" data-inset="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-d" data-iconpos="right">
<h3>Real-World-Examples</h3>
<ul data-role="listview" data-icon="false">
<li><a href="/examples/pages/profile.html" class="ui-disabled" data-ajax='false'>Profile</a></li>
<li><a href="/examples/pages/dashboard.html" class="ui-disabled" data-ajax='false'>Dashboard</a></li>
<li><a href="/examples/pages/gallery.html" class="ui-disabled" data-ajax='false'>Gallery</a></li>
<li><a href="/examples/pages/chat.html" class="ui-disabled" data-ajax='false'>Chat</a></li>
<li><a href="/examples/pages/mail_inbox.html" class="ui-disabled" data-ajax='false'>E-Mail Inbox</a></li>
<li><a href="/examples/pages/team.html" class="ui-disabled" data-ajax='false'>Team</a></li>
<li><a href="/examples/pages/products_services.html" class="ui-disabled" data-ajax='false'>Products & Services</a></li>
<li><a href="/examples/pages/blog.html" class="ui-disabled" data-ajax='false'>Blog</a></li>
<li><a href="/examples/pages/blogpost.html" class="ui-disabled" data-ajax='false'>Blogpost</a></li>
</ul>
</div>
<hr class="inset">
<ul data-role="listview" data-inset="false">
<li data-role="list-divider">Information</li>
</ul>
<div data-role="collapsible" data-inset="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-d" data-iconpos="right">
<h3>Nice to Know</h3>
<ul data-role="listview" data-icon="false">
<li><a href="/info/colors_and_styles.html" data-ajax='false'>Colors & Styles</a></li>
<li><a href="/info/credits.html" data-ajax='false'>Credits & License</a></li>
</ul>
</div>
</div>
<!-- /panel left -->