-
Notifications
You must be signed in to change notification settings - Fork 46
/
components_buttons.html
297 lines (251 loc) · 12.1 KB
/
components_buttons.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
---
layout: admin
title: Components - Buttons
section: components
module: components_buttons
header:
icon: gamepad
title: Buttons
description: There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.
---
<section id="components_buttons">
<!-- ###### -->
<!-- Raised -->
<!-- ###### -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Raised</h4>
<a class="waves-effect waves-light btn">button</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>
<pre>
<code class="language-markup">
<a class="waves-effect waves-light btn">Stuff</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>
</code>
</pre>
</div>
</div>
<!-- ######## -->
<!-- Floating -->
<!-- ######## -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Floating</h4>
<a class="btn-floating waves-effect waves-light btn-large"><i class="material-icons">add</i></a>
<pre>
<code class="language-markup">
<a class="btn-floating btn-large waves-effect waves-light"><i class="material-icons">add</i></i></a>
</code>
</pre>
</div>
<div class="col s12 margin-top-25">
<h5>Fixed Action Button</h5>
<p>If you want a fixed floating action button, you can add multiple actions that will appear on hover. Our demo is in the bottom righthand corner of the page.</p>
<div class="fixed-action-btn" style="bottom: 20px; right: 20px;">
<a class="btn-floating btn-large">
<i class="material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
<pre>
<code class="language-markup">
<div class="fixed-action-btn" style="bottom: 20px; right: 20px;">
<a class="btn-floating btn-large">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</code>
</pre>
<p>You can also open and close the Fixed Action Button Menu programatically.</p>
<pre>
<code class="language-javascript">
$('.fixed-action-btn').openFAB();
$('.fixed-action-btn').closeFAB();
$('.fixed-action-btn.toolbar').openToolbar();
$('.fixed-action-btn.toolbar').closeToolbar();
</code>
</pre>
</div>
<div class="col s12 margin-top-25">
<h5>Horizontal FAB</h5>
<p>Creating a horizontal FAB is easy! Just add the class <code class="language-markup">horizontal</code> to the FAB.</p>
<div style="position: relative;">
<div class="fixed-action-btn horizontal" style="position: absolute; display: inline-block; bottom: 10px; right: 10px;">
<a class="btn-floating btn-large">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</div>
<pre>
<code class="language-markup col s12">
<div class="fixed-action-btn horizontal" style="bottom: 10px; right: 10px;">
<a class="btn-floating btn-large">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</code>
</pre>
</div>
<div class="col s12 margin-top-25">
<h5>Click-only FAB</h5>
<p>If you want to disable the hover behaviour, and instead toggle the FAB menu when the user clicks on the large button (works great on mobile!), just add the <code class="language-markup">click-to-toggle</code> class to the FAB.</p>
<div style="position: relative; height: 70px;">
<div class="fixed-action-btn horizontal click-to-toggle" style="position: absolute; right: 10px;">
<a class="btn-floating btn-large">
<i class="material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</div>
<pre>
<code class="language-markup col s12">
<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 10px; right: 10px;">
<a class="btn-floating btn-large">
<i class="large mdi-navigation-menu"></i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</code>
</pre>
</div>
<div class="col s12 margin-top-25">
<h5>FAB to Toolbar</h5>
<p>Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Just add the <code class="language-markup">toolbar</code> class to the FAB.</p>
<div style="position: relative; height: 70px;">
<div class="fixed-action-btn toolbar" style="position: absolute; right: 10px;">
<a class="btn-floating btn-large">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</div>
<pre>
<code class="language-markup col s12">
<div class="fixed-action-btn toolbar">
<a class="btn-floating btn-large">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li>
<li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</code>
</pre>
</div>
</div>
<!-- #### -->
<!-- Flat -->
<!-- #### -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Flat</h4>
<p>Flat buttons are used to reduce excessive layering. For example, flat buttons are usually used for actions within a card or modal so there aren't too many overlapping shadows.</p>
<a class="waves-effect waves-alternative btn-flat">Button</a>
<pre>
<code class="language-markup">
<a class="waves-effect waves-alternative btn-flat">Button</a>
</code>
</pre>
</div>
</div>
<!-- ############# -->
<!-- Submit Button -->
<!-- ############# -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Submit Button</h4>
<p>When you use a button to submit a form, instead of using a input tag, use a button tag with a type submit</p>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit<i class="material-icons right">send</i></button>
<pre>
<code class="language-markup">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit
<i class="material-icons right">send</i></i>
</button>
</code>
</pre>
</div>
</div>
<!-- ##### -->
<!-- Large -->
<!-- ##### -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Large</h4>
<a class="waves-effect waves-light btn-large">Button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>button</a>
<pre>
<code class="language-markup">
<a class="waves-effect waves-light btn-large">Button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>button</a>
</code>
</pre>
</div>
</div>
<!-- ######## -->
<!-- Disabled -->
<!-- ######## -->
<div class="row">
<div class="col s12">
<h4 class="main-text lighten-1">Disabled</h4>
<p>This style can be applied to all button types</p>
<a class="btn-large disabled">Button</a>
<a class="btn disabled">Button</a>
<a class="btn-flat disabled">Button</a>
<a class="btn-floating disabled"><i class="material-icons">add</i></a>
<pre>
<code class="language-markup">
<a class="btn-large disabled">Button</a>
<a class="btn disabled">Button</a>
<a class="btn-flat disabled">Button</a>
<a class="btn-floating disabled"><i class="material-icons">add</i></a>
</code>
</pre>
</div>
</div>
</section>