-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
waves.html
185 lines (175 loc) · 6.88 KB
/
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
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
<!DOCTYPE html>
<html lang="en">
<head>
{{> head }}
</head>
<body>
{{> navbar }}
<main>
{{> intro}}
<div class="container">
<div class="row">
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
<div id="introduction" class="section scrollspy">
<h4>Introduction</h4>
<p class="caption">
Waves is an external library that we've included in Materialize
to allow us to create the ink effect outlined in Material
Design.
</p>
<a
class="waves-effect waves-light btn"
href="#!"
style="height: 70px; line-height: 70px; padding: 0 5em;"
>Wave</a
>
</div>
<div id="applying-waves" class="section scrollspy">
<h4>Applying Waves</h4>
<p>
The waves effect can be applied to any element. 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>
<!-- Customization -->
<div id="customization" class="section scrollspy">
<h4>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>
<div class="row">
<div class="col s12">
<h5 class="light">Available Classes</h5>
<p>
To use these, just add the corresponding class to your
button. Play around with changing the background color of
buttons and the waves effect to create something cool!
</p>
<pre><code class="language-markup">
<a href="#!" class="btn waves-effect">Send</a>
</code></pre>
<div class="collection waves-color-demo">
<div class="collection-item">
Default<a
href="#!"
class="waves-effect btn secondary-content"
>Send</a
>
</div>
<div class="collection-item">
<code class="language-markup">waves-light</code
><a
href="#!"
class="waves-effect waves-light btn secondary-content"
>Send</a
>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<h4>Call programmatically</h4>
<p>
We've added the ability to create a Wave on a specific
HTMLElement programmatically. Here you can set a custom
color and position. Click on the Button to test it out.
</p>
<div class="row">
<div class="col s6">
<button
type="button"
class="btn"
onclick="M.Waves.renderWaveEffect(document.querySelector('.wave-demo'), null, {r: 255, g: 0, b: 0});"
>
Trigger Wave!
</button>
</div>
<div class="col s6">
<div
class="wave-demo card center-align"
style="width: 100%; height: 100px;"
>
.wave-demo
</div>
</div>
</div>
<pre><code class="language-javascript">
// Trigger a red Wave from center programmatically
M.Waves.renderWaveEffect(
document.querySelector('.wave-demo'), // Target Element
null, // Position {x, y}
{r: 255, g: 0, b: 0} // RGB Color
);
</code></pre>
</div>
</div>
</div>
<div id="circle" class="section scrollspy">
<!-- Circle -->
<h4>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>
<div class="row">
<div class="col s12">
<h5 class="light">HTML Markup</h5>
<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-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>
</div>
</div>
<!-- Table of Contents -->
<div class="col hide-on-small-only m3 xl3">
<div class="toc-wrapper">
<div style="height: 1px;">
<ul class="section table-of-contents">
<li><a href="#introduction">Introduction</a></li>
<li><a href="#applying-waves">Applying Waves</a></li>
<li><a href="#customization">Customization</a></li>
<li><a href="#circle">Circle Waves</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
{{> footer }}
<script type="module" src="/src/main.ts"></script>
</body>
</html>