Skip to content

Commit 98c7f3a

Browse files
acburstacburst
committed
fixed headers for css and components
1 parent 0eb2bdd commit 98c7f3a

13 files changed

+158
-96
lines changed

‎jade/page-contents/buttons_content.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h3 class="header">Floating</h3>
2424
</code></pre>
2525
<br>
2626

27-
<h4 class="light">Fixed Action Button</h4>
27+
<h5>Fixed Action Button</h5>
2828
<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>
2929
<pre><code class="language-markup col s12">
3030
&lt;div class="fixed-action-btn">
@@ -49,7 +49,7 @@ <h4 class="light">Fixed Action Button</h4>
4949
});
5050
</code></pre>
5151
<br>
52-
<h4 class="light">Horizontal FAB</h4>
52+
<h5>Horizontal FAB</h5>
5353
<p>Creating a horizontal FAB is easy! Just set the direction parameter.</p>
5454
<div style="position: relative; height: 70px;">
5555
<div class="fixed-action-btn horizontal" style="position: absolute; display: inline-block; right: 24px;">
@@ -83,7 +83,7 @@ <h4 class="light">Horizontal FAB</h4>
8383
</div>
8484
<br>
8585

86-
<h4 class="light">Click-only FAB</h4>
86+
<h5>Click-only FAB</h5>
8787
<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>
8888
<div style="position: relative; height: 70px;">
8989
<div class="fixed-action-btn click-to-toggle" style="position: absolute; right: 24px;">
@@ -104,8 +104,9 @@ <h4 class="light">Click-only FAB</h4>
104104
hoverEnabled: false
105105
});
106106
</code></pre>
107+
<br>
107108

108-
<h4 class="light">FAB to Toolbar</h4>
109+
<h5>FAB to Toolbar</h5>
109110
<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>
110111
<iframe src="fab-toolbar-demo.html" frameborder="0" width="100%" height="100px"></iframe>
111112
<pre><code class="language-javascript">

‎jade/page-contents/cards_content.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ <h3 class="header">Card Reveal</h3>
257257
</div>
258258
<div class="row">
259259
<div class="col s12 m6">
260-
<h4 class="light">Card Action Options</h4>
260+
<h5>Card Action Options</h5>
261261
<div class="card">
262262
<div class="card-image waves-effect waves-block waves-light">
263263
<img class="activator" src="images/office.jpg">
@@ -359,7 +359,7 @@ <h3 class="header">Tabs in Cards</h3>
359359
</div>
360360
<div class="row">
361361
<div class="col s12 m6">
362-
<h4 class="light">White</h4>
362+
<h5>White</h5>
363363
<div class="card">
364364
<div class="card-content">
365365
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
@@ -387,7 +387,7 @@ <h4 class="light">White</h4>
387387
</div>
388388
<div class="row">
389389
<div class="col s12 m6">
390-
<h4 class="light">Colored</h4>
390+
<h5>Colored</h5>
391391
<div class="card blue">
392392
<div class="card-content white-text">
393393
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
@@ -431,7 +431,7 @@ <h3 class="header">Card Sizes</h3>
431431
</div>
432432
<div class="row">
433433
<div class="col s12 m6">
434-
<h4 class="light">Small</h4>
434+
<h5>Small</h5>
435435
<div class="card small">
436436
<div class="card-image">
437437
<img src="images/sample-1.jpg">
@@ -456,7 +456,7 @@ <h4 class="light">Small</h4>
456456

457457
<div class="row">
458458
<div class="col s12 m7">
459-
<h4 class="light">Medium</h4>
459+
<h5>Medium</h5>
460460
<div class="card medium">
461461
<div class="card-image">
462462
<img src="images/sample-1.jpg">
@@ -481,7 +481,7 @@ <h4 class="light">Medium</h4>
481481

482482
<div class="row">
483483
<div class="col s12 m8">
484-
<h4 class="light">Large</h4>
484+
<h5>Large</h5>
485485
<div class="card large">
486486
<div class="card-image">
487487
<img src="images/sample-1.jpg">

‎jade/page-contents/chips_content.html‎

Lines changed: 85 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
55

66
<div id="introduction" class="section scrollspy">
7-
<h4>Introduction</h4>
87
<p class="caption">
98
Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
109
</p>
@@ -19,7 +18,7 @@ <h4>Introduction</h4>
1918
</div>
2019

2120
<div id="contact" class="section scrollspy">
22-
<h4>Contacts</h4>
21+
<h3 class="header">Contacts</h3>
2322
<p class="caption">
2423
To create a contact chip just add an img inside.
2524
</p>
@@ -32,7 +31,7 @@ <h4>Contacts</h4>
3231
</div>
3332

3433
<div id="tag" class="section scrollspy">
35-
<h4>Tags</h4>
34+
<h3 class="header">Tags</h3>
3635
<p class="caption">
3736
To create a tag chip just add a close icon inside with the class <code class="language-markup">close</code>.
3837
</p>
@@ -45,7 +44,7 @@ <h4>Tags</h4>
4544
</div>
4645

4746
<div id="basic" class="section scrollspy">
48-
<h4>Javascript Plugin Usage</h4>
47+
<h3 class="header">Javascript Plugin</h4>
4948
<p class="caption">To add tags, just enter your tag text and press enter. You can delete them by clicking on the close icon or by using your delete button.</p>
5049
<div class="chips"><input></div>
5150
<br>
@@ -60,17 +59,21 @@ <h4>Javascript Plugin Usage</h4>
6059
</div>
6160

6261
<div id="properties" class="section scrollspy">
63-
<h4>Markup</h4>
6462
<pre><code class="language-markup">
6563
&lt;div class="chips">&lt;/div>
6664
&lt;div class="chips chips-initial">&lt;/div>
6765
&lt;div class="chips chips-placeholder">&lt;/div>
6866
&lt;div class="chips chips-autocomplete">&lt;/div>
6967
</code></pre>
70-
<h4>jQuery Initialization</h4>
68+
<h3 class="header">Initialization</h3>
7169
<pre><code class="language-javascript">
72-
$('.chips').material_chip();
73-
$('.chips-initial').material_chip({
70+
var elem = document.querySelector('.chips');
71+
var instance = new M.Chips(elem, options);
72+
73+
// Or with jQuery
74+
75+
$('.chips').chips();
76+
$('.chips-initial').chips({
7477
data: [{
7578
tag: 'Apple',
7679
}, {
@@ -79,11 +82,11 @@ <h4>jQuery Initialization</h4>
7982
tag: 'Google',
8083
}],
8184
});
82-
$('.chips-placeholder').material_chip({
85+
$('.chips-placeholder').chips({
8386
placeholder: 'Enter a tag',
8487
secondaryPlaceholder: '+Tag',
8588
});
86-
$('.chips-autocomplete').material_chip({
89+
$('.chips-autocomplete').chips({
8790
autocompleteOptions: {
8891
data: {
8992
'Apple': null,
@@ -105,54 +108,63 @@ <h4>jQuery Initialization</h4>
105108
</code></pre>
106109

107110
<br>
108-
<h4>jQuery Plugin Options</h4>
111+
<h3 class="header">Options</h3>
109112
<table class="table highlight">
110113
<thead>
111114
<tr>
112-
<th>Option Name</th>
115+
<th>Name</th>
113116
<th>Type</th>
117+
<th>Default</th>
114118
<th>Description</th>
115119
</tr>
116120
</thead>
117121
<tbody>
118122
<tr>
119123
<td>data</td>
120-
<td>array</td>
124+
<td>Array</td>
125+
<td>[]</td>
121126
<td>Set the chip data (look at the Chip data object)</td>
122127
</tr>
123128
<tr>
124129
<td>placeholder</td>
125-
<td>string</td>
130+
<td>String</td>
131+
<td>''</td>
126132
<td>Set first placeholder when there are no tags.</td>
127133
</tr>
128134
<tr>
129135
<td>secondaryPlaceholder</td>
130-
<td>string</td>
136+
<td>String</td>
137+
<td>''</td>
131138
<td>Set second placeholder when adding additional tags.</td>
132139
</tr>
133140
<tr>
134141
<td>autocompleteOptions</td>
135142
<td>Object</td>
143+
<td>{}</td>
136144
<td>Set autocomplete options.</td>
137145
</tr>
138146
<tr>
139147
<td>limit</td>
140148
<td>Integer</td>
149+
<td>Infinity</td>
141150
<td>Set chips limit.</td>
142151
</tr>
143152
<tr>
144153
<td>onChipAdd</td>
145154
<td>Function</td>
155+
<td>null</td>
146156
<td>Callback for chip add.</td>
147157
</tr>
148158
<tr>
149159
<td>onChipSelect</td>
150160
<td>Function</td>
161+
<td>null</td>
151162
<td>Callback for chip select.</td>
152163
</tr>
153164
<tr>
154165
<td>onChipDelete</td>
155166
<td>Function</td>
167+
<td>null</td>
156168
<td>Callback for chip delete.</td>
157169
</tr>
158170
<tr>
@@ -161,20 +173,70 @@ <h4>jQuery Plugin Options</h4>
161173
</div>
162174

163175
<div id="methods" class="section scrollspy">
164-
<h4>Methods</h4>
176+
<h3 class="header">Methods</h3>
165177
<p class="caption">
166178
Use these methods to interact with chips.
167179
</p>
168180

169-
<pre><code class="language-javascript">
170-
// Add Chip
171-
$('.chips-initial').chips('addChip', data);
181+
<blockquote>
182+
<p>Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this: </p>
183+
<pre><code class="language-javascript col s12">
184+
var instance = M.Carousel.getInstance(elem);
185+
186+
/* jQuery Method Calls
187+
You can still use the old jQuery plugin method calls.
188+
But you won't be able to access instance properties.
172189

173-
// Select Chip
174-
$('.chips-initial').chips('selectChip', chipIndex);
190+
$('.carousel').carousel('methodName');
191+
$('.carousel').carousel('methodName', paramName);
192+
*/
193+
</code></pre>
194+
</blockquote>
195+
196+
<h5 class="method-header">
197+
.next();
198+
</h5>
199+
<p>Move carousel to next slide or go forward a given amount of slides.</p>
200+
<h6>Arguments</h6>
201+
<p><b>Integer (optional):</b> How many times the carousel slides.</p>
202+
<pre><code class="language-javascript col s12">
203+
instance.next();
204+
instance.next(3); // Move next n times.
205+
</code></pre>
206+
<br>
207+
208+
<h5 class="method-header">
209+
.addChip();
210+
</h5>
211+
<p>Add chip to input.</p>
212+
<h6>Arguments</h6>
213+
<p><b>Chip:</b> Chip data object.</p>
214+
<pre><code class="language-javascript col s12">
215+
instance.prev();
216+
instance.prev(3); // Move previous n times.
217+
</code></pre>
218+
<br>
219+
220+
<h5 class="method-header">
221+
.deleteChip();
222+
</h5>
223+
<p>Delete nth chip.</p>
224+
<h6>Arguments</h6>
225+
<p><b>Integer:</b> Index of chip.</p>
226+
<pre><code class="language-javascript col s12">
227+
instance.set();
228+
instance.set(3); // Set to nth slide.
229+
</code></pre>
230+
<br>
175231

176-
// Delete Chip
177-
$('.chips-initial').chips('deleteChip', chipIndex);
232+
<h5 class="method-header">
233+
.selectChip();
234+
</h5>
235+
<p>Select nth chip.</p>
236+
<h6>Arguments</h6>
237+
<p><b>Integer:</b> Index of chip.</p>
238+
<pre><code class="language-javascript col s12">
239+
instance.destroy();
178240
</code></pre>
179241

180242
</div>

‎jade/page-contents/css-transitions_content.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,16 @@
66
<div id="scale" class="section scrollspy">
77
<p class="caption">We've made some custom animation classes that will transition your content with only CSS. Each CSS transition consists of a base class that applies the necessary styles and additional classes that control the state of the transition.</p>
88

9-
<h4>Scale</h4>
9+
<br>
10+
<h5>Scale</h5>
1011
<p>Use this scale in and out elements. Make sure to add the base transition class <code class="language-markup">scale-transition</code>. Then add the class <code class="language-markup">scale-out</code> to scale the element down until it is hidden. To start something as hidden, add the class <code class="language-markup">scale-out</code> first, and then add the class <code class="language-markup">scale-in</code> to scale the element up until it is shown.</p>
12+
<br>
1113

1214
<a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition"><i class="material-icons">add</i></a>
1315

1416
<a id="scale-demo-trigger" href="#!" class="btn right">Toggle Scale</a>
1517

18+
<br><br>
1619
<pre><code class="language-markup">
1720
&lt;!-- Scaled in -->
1821
&lt;a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition">

0 commit comments

Comments
 (0)