forked from felippepuhle/aero-admin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
js_waves.html
122 lines (98 loc) · 6.42 KB
/
js_waves.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
---
layout: admin
title: Javascript - Waves
section: js
module: js_waves
header:
icon: all_out
title: Waves
description: Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design
stylesheets:
- css/pages/js_waves.css
---
<section id="js_waves">
<!-- ############ -->
<!-- Introduction -->
<!-- ############ -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Introduction</h4>
<a class="waves-effect waves-light btn" href="#!">Wave</a>
</div>
</div>
<!-- ############## -->
<!-- Applying Waves -->
<!-- ############## -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Applying Waves</h4>
<p>To put the waves effect on buttons, you just have to put the class <code class="language-markup">waves-effect</code> on to the buttons. If you want the waves effect to be white instead, add both <code class="language-markup">waves-effect waves-light</code> as classes.</p>
<pre>
<code class="language-markup">
<a class="waves-effect waves-light btn-large" href="#">Wave</a>
</code>
</pre>
</div>
</div>
<!-- ############# -->
<!-- Customization -->
<!-- ############# -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Customization</h4>
<p>There are several ways to customize waves, you can either use pre-created classes, or you can define your own color by creating a new class</p>
<h5 class="margin-top-35">Available Colors</h5>
<p>To use these, just add the corresponding class to your button. Play around with changing the background color of butons and the waves effect to create something cool!</p>
<pre>
<code class="language-markup">
<a href="#!" class="btn waves-effect waves-teal">Send</a>
</code>
</pre>
<div class="collection waves-color-demo">
<div class="collection-item">Default<a href="#!" class="waves-effect btn-flat small pull-right">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-light</code><a href="#!" class="waves-effect waves-light btn small pull-right">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-red</code><a href="#!" class="waves-effect waves-red btn-flat small pull-right">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-yellow</code><a href="#!" class="waves-effect waves-yellow btn-flat small pull-right">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-orange</code><a href="#!" class="waves-effect waves-orange btn-flat small pull-right">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-purple</code><a href="#!" class="waves-effect waves-purple btn-flat small pull-right">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-green</code><a href="#!" class="waves-effect waves-green btn-flat small pull-right">Send</a></div>
<div class="collection-item"><code class="language-markup">waves-teal</code><a href="#!" class="waves-effect waves-teal btn-flat small pull-right">Send</a></div>
</div>
<h5 class="margin-top-35">Custom Colors</h5>
<p>If the color you want is not already available, you can easily make your own waves color by creating a custom CSS class. Take a look at the example below where we add a waves-brown effect</p>
<pre>
<code class="language-css">
/*
When creating your CSS selector,
change "brown" to something of your choosing
*/
.waves-effect.waves-brown .waves-ripple {
/* The alpha value allows the text and background color
of the button to still show through. */
background-color: rgba(121, 85, 72, 0.65);
}
</code>
</pre>
</div>
</div>
<!-- ###### -->
<!-- Circle -->
<!-- ###### -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Circle</h4>
<p>If you want waves to form to a non rectangular shape, there is an option for circular waves. Just add the <code class="language-markup">waves-circle</code> in addition to <code class="language-markup">waves-effect</code></p>
<pre>
<code class="language-markup">
<a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
<i class="material-icons">add</i>
</a>
</code>
</pre>
<div class="collection waves-circle-color-demo">
<div class="collection-item">Default<a href="#!" class="waves-effect waves-circle btn-floating secondary-content"><i class="material-icons">add</i></a></div>
<div class="collection-item"><code class="language-markup">waves-light</code><a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content"><i class="material-icons">add</i></a></div>
</div>
</div>
</div>
</section>