forked from fians/Waves
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
324 lines (247 loc) · 13 KB
/
index.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="icon" href="https://publicis.co.id/favicon.ico" />
<!-- Remove Tap Highlight on Windows Phone IE -->
<meta name="msapplication-tap-highlight" content="no"/>
<title>Waves</title>
<meta name="description" content="Waves - Click effect inspired by Google's Material Design" />
<link rel="stylesheet" type="text/css" href="https://publicis.co.id/assets/font/opensans_light/main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./docs/static/prims.css">
<link rel="stylesheet" type="text/css" href="./dist/waves.min.css">
<link rel="stylesheet" type="text/css" href="./docs/static/style.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-37193210-5', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="lead" class="text-center waves-effect waves-light waves-block">
<h1>Waves</h1>
<p>Click effect inspired by Google's Material Design</p>
</div>
<div id="content">
<div class="button">
<h2>Waves on buttons</h2>
<p>
<strong>Flat buttons</strong>
<a class="toggle-code" data-source="#plainButtonCode">(show source)</a>
</p>
<p class="text-center">
<a class="waves-effect waves-button">Button A</a>
<button class="waves-effect waves-button">Button B</button>
<input class="waves-effect waves-button" type="submit" value="Button C">
<input class="waves-effect waves-button" type="button" value="Button D">
</p>
<div id="plainButtonCode" class="hide">
<pre data-src="./docs/sources/button-flat.html"></pre>
</div>
<p>
<strong>Float buttons</strong>
<a class="toggle-code" data-source="#raisedButtonCode">(show source)</a>
</p>
<p class="text-center">
<a class="waves-effect waves-button waves-float" style="background: #01BCFF;color:#fff">Button A</a>
<button class="waves-effect waves-button waves-light waves-float" style="background: #1bb556;color: #fff;">Button B</button>
<input class="waves-effect waves-button waves-float" style="background: #ff4f0f;color:#fff" type="submit" value="Button C">
<input class="waves-effect waves-button waves-light waves-float" style="background: #666;color:#fff" type="button" value="Button D">
</p>
<div id="raisedButtonCode" class="hide">
<pre data-src="./docs/sources/button-float.html"></pre>
</div>
</div>
<div class="icon">
<h2>Waves on icons</h2>
<p>
<strong>Plain Icons</strong>
<a class="toggle-code" data-source="#plainIconCode">(show source)</a>
</p>
<p class="text-center">
<i class="fa fa-bars waves-effect waves-icon"></i>
<i class="fa fa-bookmark waves-effect waves-icon"></i>
<i class="fa fa-calendar waves-effect waves-icon"></i>
<i class="fa fa-envelope waves-effect waves-icon"></i>
<i class="fa fa-exclamation waves-effect waves-icon"></i>
<i class="fa fa-folder waves-effect waves-icon"></i>
<i class="fa fa-gear waves-effect waves-icon"></i>
<i class="fa fa-image waves-effect waves-icon"></i>
<i class="fa fa-user waves-effect waves-icon"></i>
</p>
<div id="plainIconCode" class="hide">
<pre data-src="./docs/sources/icon-plain.html"></pre>
</div>
<p>
<strong>Colored Icons</strong>
<a class="toggle-code" data-source="#coloredIconCode">(show source)</a>
</p>
<p class="text-center">
<i class="fa fa-bars waves-effect waves-icon" style="background: #ff6400;color:#fff;"></i>
<i class="fa fa-bookmark waves-effect waves-icon waves-light" style="background: #d54f38;color:#fff;"></i>
<i class="fa fa-calendar waves-effect waves-icon" style="background: #eb4d7e;color:#fff;"></i>
<i class="fa fa-envelope waves-effect waves-icon waves-light" style="background: #d138c8;color:#fff;"></i>
<i class="fa fa-exclamation waves-effect waves-icon" style="background: #bd73ff;color:#fff;"></i>
<i class="fa fa-folder waves-effect waves-icon waves-light" style="background: #0074d6;color:#fff;"></i>
<i class="fa fa-gear waves-effect waves-icon" style="background: #00d3d6;color:#fff;"></i>
<i class="fa fa-image waves-effect waves-icon waves-light" style="background: #24ad72;color:#fff;"></i>
<i class="fa fa-user waves-effect waves-icon" style="background:#8ee05e;color:#fff;"></i>
</p>
<div id="coloredIconCode" class="hide">
<pre data-src="./docs/sources/icon-colored.html"></pre>
</div>
</div>
<div class="other">
<h2>Waves on others</h2>
<p>
<strong>DIVs</strong>
<a class="toggle-code" data-source="#divOtherCode">(show source)</a>
</p>
<div class="box waves-effect waves-block">Plain Box</div>
<div class="box colored-box waves-effect waves-light waves-block">Colored Box</div>
<div class="box raised-box waves-effect waves-float waves-block">Raised Box</div>
<div class="clear"></div>
<div id="divOtherCode" class="hide">
<pre data-src="./docs/sources/other-div.html"></pre>
</div>
<p>
<strong>Images</strong>
<a class="toggle-code" data-source="#imagesOtherCode">(show source)</a>
</p>
<p class="text-center">
<span class="waves-effect">
<img src="https://farm2.staticflickr.com/1297/1091511802_2fb2451ecc_n.jpg">
</span>
</p>
<p>
Image Source: <a href="https://www.flickr.com/photos/aigle_dore/5238554034" target="_blank">© Moyan Brenn. Flickr</a>
</p>
<p class="text-center">
<span class="waves-effect waves-light waves-float">
<img src="https://farm6.staticflickr.com/5241/5238554034_851a63e262_n.jpg">
</span>
</p>
<p>
Image Source: <a href="https://www.flickr.com/photos/roberto_ferrari/1091511802" target="_blank">© Roberto Ferrari. Flickr</a>
</p>
<div id="imagesOtherCode" class="hide">
<pre data-src="./docs/sources/other-images.html"></pre>
</div>
</div>
<div class="doc">
<h2>Getting Started</h2>
<p>
It's easy to use Waves. Download the latest version of Waves from <a href="https://github.com/publicis-indonesia/Waves/releases">Github repository</a>. Just include waves.min.css and waves.min.js to your HTML file. And Waves is ready to use!
</p>
<pre data-src="./docs/sources/example-html-file.html"></pre>
<p>
To put Waves effect on your buttons, just add <code class="language-css">.waves-effect</code> and <code class="language-css">.waves-button</code> class to your buttons.
</p>
<pre data-src="./docs/sources/example-html-button.html"></pre>
<p>
Normally, the effect will not work on single tag element like <code class="language-markup"><input></code>. That's why Waves will wrap <code class="language-markup"><input></code> inside <code class="language-markup"><i></code> automatically if you display the effect.
</p>
<pre data-src="./docs/sources/example-html-input-wrapper.html"></pre>
<p>
Waves support Font Awesome icons, so you can give the icons Waves effect. It's simple, just give additional <code class="language-css">.waves-effect</code> and <code class="language-css">.waves-icon</code> class to your <code class="language-markup"><i></code> tags and Waves will wrap icon inside circle spot that will prevent Waves effect spreading.
</p>
<pre data-src="./docs/sources/example-html-icon.html"></pre>
<p>
You can also give Waves effect to other element tag like <code class="language-markup"><div></code> or <code class="language-markup"><img></code>. All you need to do is just put <code class="language-css">.waves-effect</code> class. For element that not have closing tag like <code class="language-markup"><img></code>, you have to wrap it inside <code class="language-markup"><span></code>, and for element that have blocky display like <code class="language-markup"><div></code>, you need to put <code class="language-css">.waves-block</code> class to keep its shape.
</p>
<pre data-src="./docs/sources/example-html-other.html"></pre>
</div>
<div class="doc">
<h2>Styling</h2>
<p>
Waves give you capabilities to color your <code class="language-css">.waves-effect</code>. You can do this by set up the color and backgroun-color/background properties on your element style (or CSS file).
</p>
<pre data-src="./docs/sources/example-html-coloring.html"></pre>
<p>
By default, Waves ripple is darker. If you want the ripple is lighter, you can set <code class="language-css">.waves-light</code> along side <code class="language-css">.waves-effect</code> class. Make sure the element has been colored, because if it haven't colored yet, you cannot see the light ripple.
</p>
<pre data-src="./docs/sources/example-html-light-ripple.html"></pre>
<p>
Not only give your "Waves effect", Waves also provide raise effect when you click an element
by adding <code class="language-css">.waves-float</code> class to the element. Once again, before put raise effect, your have to make sure the element has been colored, to prevent weird shadow on the element.
</p>
<pre data-src="./docs/sources/example-html-raised.html"></pre>
</div>
<div class="doc">
<h2>API</h2>
<h3 class="code-head">displayEffect(config)</h3>
<p>
<strong>Arguments</strong>
</p>
<ul>
<li><span class="code">config</span> - (optional) Configuration object for displaying Waves effect.</li>
</ul>
<pre data-src="./docs/sources/example-api-config-object.js"></pre>
</div>
<div class="doc">
<h2>FAQ</h2>
<p>
<strong>What browsers support Waves?</strong>
</p>
<p>
Waves works in latest modern browser (i.e. Chrome, Firefox, Opera and Safari) and also IE10+. More browser support will comming.
</p>
<p>
<strong>Does Waves support mobile devices?</strong>
</p>
<p>
Waves is partially support mobile device by using <code class="languange-js">touchstart</code> and <code class="languange-js">touchend</code> event.
</p>
<p>
<strong>Can I make Waves better?</strong>
</p>
<p>
Yes, we strongly encourage you to contribute to make Waves better. So, if you find a bug, or have nice idea for Waves development, please <a href="https://github.com/publicis-indonesia/Waves/issues" target="_blank">mention us</a>.
</p>
</div>
<div class="doc">
<h2>Quick Fix</h2>
<p>
<strong>IE Tap highlight on Windows Phone</strong>
</p>
<p>
By default if you access a web page using IE in Windows Phone, you will get tap highlight
effect when you tapping a link or button and this highlight will shadowed Waves effect. To prevent this thing happen, you will need to add <code>msapplication-tap-highlight</code> meta tag on your header.
</p>
<pre data-src="./docs/sources/example-html-quick-fix-ie-tap-highlight.html"></pre>
</div>
<footer class="text-center">
Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank">Creative Commons Attribution 3.0 License</a>, and code samples are licensed under the <a href="https://github.com/publicis-indonesia/Waves/blob/master/LICENSE" target="_blank">BSD License</a>.
<br>
2014 © <a href="https://publicis.co.id" target="blank">Publicis Indonesia</a>. All Right Reserved.
</footer>
<a href="https://github.com/publicis-indonesia/Waves" target="_blank"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<script type="text/javascript" src="./docs/static/prims.js"></script>
<script type="text/javascript" src="./dist/waves.min.js"></script>
<script type="text/javascript">
Waves.displayEffect();
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$('a.toggle-code').on('click', function() {
var link = $(this);
var el = $($(this).data('source'));
if (el.hasClass('hide'))
{
link.text('(hide source)');
return el.removeClass('hide');
}
link.text('(show source)');
return el.addClass('hide');
});
});
</script>
</div>
</body>
</html>