Skip to content

Commit f5b6678

Browse files
wuda-iowuda-io
authored
Merge pull request #26 from gselderslaghs/v2-dev
Updated docs for select, card, datepicker, timepicker
2 parents fe1155e + 8a3d8ee commit f5b6678

File tree

6 files changed

+119
-55
lines changed

6 files changed

+119
-55
lines changed

‎src/breadcrumbs.html

Lines changed: 44 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,27 +13,56 @@
1313
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
1414
<!-- Collections Section -->
1515
<div id="basic" class="section scrollspy">
16-
<div class="row">
17-
<div class="col s12">
18-
<p class="caption">Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content.</p>
19-
<h3 class="header">Basic</h3>
16+
<div class="row">
17+
<div class="col s12">
18+
<p class="caption">Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content.</p>
19+
<h3 class="header">Basic</h3>
2020

21-
<nav>
22-
<div class="nav-wrapper">
23-
<div class="col s12">
24-
<a href="#!" class="breadcrumb">First</a>
25-
<a href="#!" class="breadcrumb">Second</a>
26-
<a href="#!" class="breadcrumb">Third</a>
27-
</div>
21+
<nav class="breadcrumb-wrapper">
22+
<div class="col s12">
23+
<a href="#!" class="breadcrumb">First</a>
24+
<a href="#!" class="breadcrumb">Second</a>
25+
<a href="#!" class="breadcrumb">Third</a>
26+
</div>
27+
</nav>
28+
29+
<pre style="padding-top: 0px">
30+
<span class="copyMessage">Copied!</span>
31+
<i class="material-icons copyButton">content_copy</i>
32+
<code class="language-html copiedText">
33+
<xmp>
34+
<nav class="breadcrumb-wrapper">
35+
<div class="col s12">
36+
<a href="#!" class="breadcrumb">First</a>
37+
<a href="#!" class="breadcrumb">Second</a>
38+
<a href="#!" class="breadcrumb">Third</a>
39+
</div>
40+
</nav>
41+
</xmp>
42+
</code>
43+
</pre>
2844
</div>
29-
</nav>
45+
</div>
46+
<div class="row">
47+
<div class="col s12">
48+
<h3 class="header">Navbar style</h3>
49+
50+
<nav class="navbar breadcrumb-wrapper">
51+
<div class="nav-wrapper">
52+
<div class="col s12">
53+
<a href="#!" class="breadcrumb">First</a>
54+
<a href="#!" class="breadcrumb">Second</a>
55+
<a href="#!" class="breadcrumb">Third</a>
56+
</div>
57+
</div>
58+
</nav>
3059

31-
<pre style="padding-top: 0px">
60+
<pre style="padding-top: 0px">
3261
<span class="copyMessage">Copied!</span>
3362
<i class="material-icons copyButton">content_copy</i>
3463
<code class="language-html copiedText">
3564
<xmp>
36-
<nav>
65+
<nav class="breadcrumb-wrapper">
3766
<div class="nav-wrapper">
3867
<div class="col s12">
3968
<a href="#!" class="breadcrumb">First</a>
@@ -45,8 +74,8 @@ <h3 class="header">Basic</h3>
4574
</xmp>
4675
</code>
4776
</pre>
77+
</div>
4878
</div>
49-
</div>
5079
</div>
5180
<!-- End collections -->
5281
</div>

‎src/cards.html

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -365,19 +365,6 @@ <h5>Card Action Options</h5>
365365
</div>
366366
</xmp>
367367
</code>
368-
</pre>
369-
<h3 class="header">Initialization</h3>
370-
<pre style="padding-top: 0px;">
371-
<span class="copyMessage">Copied!</span>
372-
<i class="material-icons copyButton">content_copy</i>
373-
<code class="language-javascript copiedText">
374-
document.addEventListener('DOMContentLoaded', function() {
375-
const elems = document.querySelectorAll('.card');
376-
const instances = M.Card.init(elems, {
377-
// specify options here
378-
});
379-
});
380-
</code>
381368
</pre>
382369
</div>
383370
</div>

‎src/datepicker.html

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -173,10 +173,28 @@ <h5>Options</h5>
173173
<td><span class="red-text">DEPRECATED</span> Callback function when Datepicker is closed.</td>
174174
</tr>
175175
<tr>
176-
<td>onDraw</td>
176+
<td>isDateRange</td>
177+
<td>Boolean</td>
178+
<td>false</td>
179+
<td>Condition to enable date range selection.</td>
180+
</tr>
181+
<tr>
182+
<td>dateRangeEndEl</td>
183+
<td>Selector</td>
184+
<td>null</td>
185+
<td>(optional) selector for defined end date HTML element.</td>
186+
</tr>
187+
<tr>
188+
<td>openByDefault</td>
189+
<td>Boolean</td>
190+
<td>false</td>
191+
<td>Condition show the datepicker in open state by default.</td>
192+
</tr>
193+
<tr>
194+
<td>onInputInteraction</td>
177195
<td>Function</td>
178196
<td>null</td>
179-
<td>Callback function when Datepicker HTML is refreshed.</td>
197+
<td>Callback function on input field interaction.</td>
180198
</tr>
181199
</tbody>
182200
</table>

‎src/navbar.html

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
1313
<div id="right" class="section scrollspy">
1414
<p class="caption">
15-
The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the
15+
There are 2 main parts of the navbar. A logo or brand link, and the
1616
navigations links. You can align these links to the left or right.
1717
</p>
1818
<h3 class="header">Right Aligned Links</h3>
@@ -21,7 +21,7 @@ <h3 class="header">Right Aligned Links</h3>
2121
<code class="language-html">ul</code>
2222
that contains them.
2323
</p>
24-
<nav>
24+
<nav class="navbar">
2525
<div class="nav-wrapper">
2626
<div class="col s12">
2727
<a href="#!" class="brand-logo">Logo</a>
@@ -42,7 +42,7 @@ <h3 class="header">Right Aligned Links</h3>
4242

4343
<pre><code class="language-html">
4444
<xmp>
45-
<nav>
45+
<nav class="navbar">
4646
<div class="nav-wrapper">
4747
<a href="#" class="brand-logo">Logo</a>
4848
<ul id="nav-mobile" class="right hide-on-med-and-down">
@@ -63,7 +63,7 @@ <h3 class="header">Left Aligned Links</h3>
6363
<code class="language-html">ul</code>
6464
that contains them.
6565
</p>
66-
<nav>
66+
<nav class="navbar">
6767
<div class="nav-wrapper">
6868
<div class="col s12">
6969
<a href="#!" class="brand-logo right">Logo</a>
@@ -84,7 +84,7 @@ <h3 class="header">Left Aligned Links</h3>
8484

8585
<pre><code class="language-html">
8686
<xmp>
87-
<nav>
87+
<nav class="navbar">
8888
<div class="nav-wrapper">
8989
<a href="#" class="brand-logo right">Logo</a>
9090
<ul id="nav-mobile" class="left hide-on-med-and-down">
@@ -123,7 +123,7 @@ <h3 class="header">Centering the logo</h3>
123123

124124
<pre><code class="language-html">
125125
<xmp>
126-
<nav>
126+
<nav class="navbar">
127127
<div class="nav-wrapper">
128128
<a href="#" class="brand-logo center">Logo</a>
129129
<ul id="nav-mobile" class="left hide-on-med-and-down">
@@ -141,7 +141,7 @@ <h3 class="header">Centering the logo</h3>
141141
<h3 class="header">Active Items</h3>
142142
<p>Add active class to your li tags to denote the current page.</p>
143143

144-
<nav>
144+
<nav class="navbar">
145145
<div class="nav-wrapper">
146146
<a href="#!" class="brand-logo center">Logo</a>
147147
<ul class="left hide-on-med-and-down">
@@ -160,7 +160,7 @@ <h3 class="header">Active Items</h3>
160160

161161
<pre><code class="language-html">
162162
<xmp>
163-
<nav>
163+
<nav class="navbar">
164164
<div class="nav-wrapper">
165165
<a href="#!" class="brand-logo center">Logo</a>
166166
<ul class="left hide-on-med-and-down">
@@ -182,7 +182,7 @@ <h3 class="header">Extended Navbar with Tabs</h3>
182182
can just include a tabs component inside the <span class="language-html">nav-wrapper</span>.
183183
</p>
184184

185-
<nav class="nav-extended">
185+
<nav class="navbar nav-extended">
186186
<div class="nav-wrapper">
187187
<a href="#" class="brand-logo">Logo</a>
188188
<a href="#" data-target="mobile-demo" class="sidenav-trigger">
@@ -237,7 +237,7 @@ <h3 class="header">Extended Navbar with Tabs</h3>
237237

238238
<pre><code class="language-html">
239239
<xmp>
240-
<nav class="nav-extended">
240+
<nav class="navbar nav-extended">
241241
<div class="nav-wrapper">
242242
<a href="#" class="brand-logo">Logo</a>
243243
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
@@ -282,7 +282,7 @@ <h3 class="header">Fixed Navbar</h3>
282282
<pre><code class="language-html">
283283
<xmp>
284284
<div class="navbar-fixed">
285-
<nav>
285+
<nav class="navbar">
286286
<div class="nav-wrapper">
287287
<a href="#!" class="brand-logo">Logo</a>
288288
<ul class="right hide-on-med-and-down">
@@ -317,7 +317,7 @@ <h3 class="header">Navbar Dropdown Menu</h3>
317317
<a href="#!">three</a>
318318
</li>
319319
</ul>
320-
<nav>
320+
<nav class="navbar">
321321
<div class="nav-wrapper">
322322
<a href="#!" class="brand-logo">Logo</a>
323323
<ul class="right hide-on-med-and-down">
@@ -347,7 +347,7 @@ <h3 class="header">Navbar Dropdown Menu</h3>
347347
<li class="divider"></li>
348348
<li><a href="#!">three</a></li>
349349
</ul>
350-
<nav>
350+
<nav class="navbar">
351351
<div class="nav-wrapper">
352352
<a href="#!" class="brand-logo">Logo</a>
353353
<ul class="right hide-on-med-and-down">
@@ -382,7 +382,7 @@ <h5>Trigger dropdown menu on click</h5>
382382
<div id="icons" class="section scrollspy">
383383
<h3 class="header">Icon Links</h3>
384384

385-
<nav>
385+
<nav class="navbar">
386386
<div class="nav-wrapper">
387387
<a href="#!" class="brand-logo"> <i class="material-icons">cloud</i>Logo</a>
388388
<ul class="right hide-on-med-and-down">
@@ -415,7 +415,7 @@ <h3 class="header">Icon Links</h3>
415415
</p>
416416
<pre><code class="language-html">
417417
<xmp>
418-
<nav>
418+
<nav class="navbar">
419419
<div class="nav-wrapper">
420420
<a href="#!" class="brand-logo"><i class="material-icons">cloud</i>Logo</a>
421421
<ul class="right hide-on-med-and-down">
@@ -429,7 +429,7 @@ <h3 class="header">Icon Links</h3>
429429
</xmp>
430430
</code></pre>
431431

432-
<nav>
432+
<nav class="navbar">
433433
<div class="nav-wrapper">
434434
<a href="#!" class="brand-logo">Logo</a>
435435
<ul class="right hide-on-med-and-down">
@@ -452,7 +452,7 @@ <h3 class="header">Icon Links</h3>
452452
</p>
453453
<pre><code class="language-html">
454454
<xmp>
455-
<nav>
455+
<nav class="navbar">
456456
<div class="nav-wrapper">
457457
<a href="#!" class="brand-logo">Logo</a>
458458
<ul class="right hide-on-med-and-down">
@@ -468,7 +468,7 @@ <h3 class="header">Icon Links</h3>
468468
<div id="buttons" class="section scrollspy">
469469
<h3 class="header">Buttons</h3>
470470

471-
<nav>
471+
<nav class="navbar">
472472
<div class="nav-wrapper">
473473
<a href="#!" class="brand-logo">Logo</a>
474474
<ul class="right hide-on-med-and-down">
@@ -494,7 +494,7 @@ <h3 class="header">Buttons</h3>
494494
</p>
495495
<pre><code class="language-html">
496496
<xmp>
497-
<nav>
497+
<nav class="navbar">
498498
<div class="nav-wrapper">
499499
<a href="#!" class="brand-logo">Logo</a>
500500
<ul class="right hide-on-med-and-down">
@@ -510,7 +510,7 @@ <h3 class="header">Buttons</h3>
510510
<h5>Halfway FAB in Extended Navbar</h5>
511511
<p>Add a halfway FAB to your extended navbar.</p>
512512

513-
<nav class="nav-extended">
513+
<nav class="navbar nav-extended">
514514
<div class="nav-wrapper">
515515
<a href="#!" class="brand-logo">Logo</a>
516516
<ul class="right hide-on-med-and-down">
@@ -535,7 +535,7 @@ <h5>Halfway FAB in Extended Navbar</h5>
535535

536536
<pre><code class="language-html">
537537
<xmp>
538-
<nav class="nav-extended">
538+
<nav class="navbar nav-extended">
539539
<div class="nav-wrapper">
540540
<a href="#!" class="brand-logo">Logo</a>
541541
<ul class="right hide-on-med-and-down">
@@ -558,7 +558,7 @@ <h5>Halfway FAB in Extended Navbar</h5>
558558
<div id="search-docs" class="section scrollspy">
559559
<h3 class="header">Search Bar</h3>
560560

561-
<nav>
561+
<nav class="navbar">
562562
<div class="nav-wrapper">
563563
<form>
564564
<div class="input-field">
@@ -575,7 +575,7 @@ <h3 class="header">Search Bar</h3>
575575
<p>You can add a search form in the navbar.</p>
576576
<pre><code class="language-html">
577577
<xmp>
578-
<nav>
578+
<nav class="navbar">
579579
<div class="nav-wrapper">
580580
<form>
581581
<div class="input-field">
@@ -593,7 +593,7 @@ <h3 class="header">Search Bar</h3>
593593
<div id="mobile-collapse" class="section scrollspy">
594594
<h3 class="header">Mobile Collapse Button</h3>
595595

596-
<nav>
596+
<nav class="navbar">
597597
<div class="nav-wrapper">
598598
<a href="#!" class="brand-logo">Logo</a>
599599
<a href="#" data-target="mobile-demo" class="sidenav-trigger">
@@ -643,7 +643,7 @@ <h3 class="header">Mobile Collapse Button</h3>
643643
</p>
644644
<pre><code class="language-html">
645645
<xmp>
646-
<nav>
646+
<nav class="navbar">
647647
<div class="nav-wrapper">
648648
<a href="#!" class="brand-logo">Logo</a>
649649
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>

‎src/select.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,12 @@ <h3 class="header">Options</h3>
215215
<td>{}</td>
216216
<td>Pass options object to select dropdown initialization.</td>
217217
</tr>
218+
<tr>
219+
<td>selected</td>
220+
<td>Array</td>
221+
<td>[]</td>
222+
<td>Default options to be selected on initialization</td>
223+
</tr>
218224
</tbody>
219225
</table>
220226
</div>

0 commit comments

Comments
 (0)