forked from Dogfalo/materialize
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbadges.html
142 lines (123 loc) · 6.55 KB
/
badges.html
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>Materialize - Documentation</title>
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
<link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
<!-- Android 5 Chrome Color -->
<meta name="theme-color" content="#EE6E73">
<link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<!-- <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />-->
<!-- <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>-->
<link href="../../../css/prism.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div style="padding-right: 300px;">
<h3>Badges</h3>
<h4>Collection</h4>
<div class="row">
<div class="col s4">
<div class="collection">
<a href="#!" class="collection-item"><span class="badge">1</span>Alan</a>
<a href="#!" class="collection-item"><span class="new badge">4</span>Alan</a>
<a href="#!" class="collection-item"><span class="new badge blue">4</span>Alan</a>
<a href="#!" class="collection-item"><span class="new badge black-text">4</span>Alan</a>
<a href="#!" class="collection-item">Alan</a>
<a href="#!" class="collection-item"><span class="badge">14</span>Really long text Really long text Really long text Really long text Really long text Really long text</a>
<a href="#!" class="collection-item"><span class="new badge">4</span>Really long text Really long text Really long text Really long text Really long text Really long text</a>
</div>
</div>
</div>
<h4>Dropdown</h4>
<div class="row">
<div class="col s4">
<ul id="dropdown2" class="dropdown-content">
<li><a href="#!">one<span class="badge">1</span></a></li>
<li><a href="#!">two<span class="new badge">1</span></a></li>
<li><a href="#!">two<span class="new badge blue">1</span></a></li>
<li><a href="#!">two<span class="new badge black-text">1</span></a></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><span class="badge">1</span>Really long text Really long text Really long text Really long text Really long text Really long text</a></li>
<li><a href="#!"><span class="new badge">1</span>Really long text Really long text Really long text Really long text Really long text Really long text</a></li>
</ul>
<a class="btn dropdown-button" href="#!" data-activates="dropdown2">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>
</div>
<div class="col s4">
<ul id="dropdown3" class="dropdown-content">
<li><a href="#!">one<span class="badge">1</span></a></li>
<li><a href="#!">two<span class="new badge">1</span></a></li>
<li><a href="#!">two<span class="new badge blue">1</span></a></li>
<li><a href="#!">two<span class="new badge black-text">1</span></a></li>
<li><a href="#!">three</a></li>
<li><a href="#!">Really long text Really long text Really long text Really long text Really long text<span class="badge">1</span></a></li>
<li><a href="#!">Really long text Really long text Really long text Really long text Really long text<span class="new badge">1</span></a></li>
</ul>
<a class="btn dropdown-button" href="#!" data-constrainwidth="false" data-activates="dropdown3">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>
</div>
</div>
<h4>Nav</h4>
<nav>
<div class="nav-wrapper">
<a href="" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="">sass</a></li>
<li><a href="">sass <span class="new badge">4</span></a></li>
<li><a href="">sass <span class="new badge blue">4</span></a></li>
<li><a href="">sass <span class="new badge black-text">4</span></a></li>
<li><a href="">sass <span class="badge">4</span></a></li>
</ul>
</div>
</nav>
</div>
<ul id="slide-out" class="side-nav fixed" style="right: 0; left: auto;">
<li>
<a href="#!">Orders <span class="new badge">4</span></a>
</li>
<li>
<a href="#!">Second Sidebar Link <span class="badge">4</span></a>
</li>
</ul>
<h4>Collapsible</h4>
<div class="row">
<div class="col s4">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><span class="new badge">4</span><i class="material-icons">filter_drama</i>Very long title Very long title Very long title Very long title Very long title</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><span class="new badge blue">4</span><i class="material-icons">filter_drama</i>Very long title Very long title Very long title Very long title Very long title</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><span class="new badge black-text">4</span><i class="material-icons">filter_drama</i>Very long title Very long title Very long title Very long title Very long title</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><span class="badge">1</span><i class="material-icons">place</i>Very long title Very long title Very long title Very long title Very long title</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
</ul>
</div>
</div>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="../../../bin/materialize.js"></script>
<!-- <script src="js/velocity.min.js"></script>-->
<!-- <script src="js/leanModal.js"></script>-->
<script>
$(document).ready(function(){
$('select').material_select();
});
</script>
</body>
</html>