Skip to content

Updated docs for select, card, datepicker, timepicker #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Feb 4, 2025
Merged

Updated docs for select, card, datepicker, timepicker #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d081f9b
updated docs: add selected option #577
gselderslaghs Jan 31, 2025
30029f4
updated docs: reverse hunk from 34cfe4ad as of card auto init #579
gselderslaghs Jan 31, 2025
660913e
updated docs: breadcrumb basic and navbar style variant #573
gselderslaghs Jan 31, 2025
d1b1874
updated docs: datepicker specified date range options #360
gselderslaghs Jan 31, 2025
484ff05
updated docs: datepicker specified docked display options #140
gselderslaghs Jan 31, 2025
5eeca52
updated docs: timepicker specified docked display options #140
gselderslaghs Jan 31, 2025
8a3d8ee
updated docs: navbar add navbar class #573
gselderslaghs Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 44 additions & 15 deletions src/breadcrumbs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,56 @@
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
<!-- Collections Section -->
<div id="basic" class="section scrollspy">
<div class="row">
<div class="col s12">
<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>
<h3 class="header">Basic</h3>
<div class="row">
<div class="col s12">
<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>
<h3 class="header">Basic</h3>

<nav>
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">First</a>
<a href="#!" class="breadcrumb">Second</a>
<a href="#!" class="breadcrumb">Third</a>
</div>
<nav class="breadcrumb-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">First</a>
<a href="#!" class="breadcrumb">Second</a>
<a href="#!" class="breadcrumb">Third</a>
</div>
</nav>

<pre style="padding-top: 0px">
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
<code class="language-html copiedText">
<xmp>
<nav class="breadcrumb-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">First</a>
<a href="#!" class="breadcrumb">Second</a>
<a href="#!" class="breadcrumb">Third</a>
</div>
</nav>
</xmp>
</code>
</pre>
</div>
</nav>
</div>
<div class="row">
<div class="col s12">
<h3 class="header">Navbar style</h3>

<nav class="navbar breadcrumb-wrapper">
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">First</a>
<a href="#!" class="breadcrumb">Second</a>
<a href="#!" class="breadcrumb">Third</a>
</div>
</div>
</nav>

<pre style="padding-top: 0px">
<pre style="padding-top: 0px">
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
<code class="language-html copiedText">
<xmp>
<nav>
<nav class="breadcrumb-wrapper">
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">First</a>
Expand All @@ -45,8 +74,8 @@ <h3 class="header">Basic</h3>
</xmp>
</code>
</pre>
</div>
</div>
</div>
</div>
<!-- End collections -->
</div>
Expand Down
13 changes: 0 additions & 13 deletions src/cards.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -365,19 +365,6 @@ <h5>Card Action Options</h5>
</div>
</xmp>
</code>
</pre>
<h3 class="header">Initialization</h3>
<pre style="padding-top: 0px;">
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
<code class="language-javascript copiedText">
document.addEventListener('DOMContentLoaded', function() {
const elems = document.querySelectorAll('.card');
const instances = M.Card.init(elems, {
// specify options here
});
});
</code>
</pre>
</div>
</div>
Expand Down
22 changes: 20 additions & 2 deletions src/datepicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,10 +173,28 @@ <h5>Options</h5>
<td><span class="red-text">DEPRECATED</span> Callback function when Datepicker is closed.</td>
</tr>
<tr>
<td>onDraw</td>
<td>isDateRange</td>
<td>Boolean</td>
<td>false</td>
<td>Condition to enable date range selection.</td>
</tr>
<tr>
<td>dateRangeEndEl</td>
<td>Selector</td>
<td>null</td>
<td>(optional) selector for defined end date HTML element.</td>
</tr>
<tr>
<td>openByDefault</td>
<td>Boolean</td>
<td>false</td>
<td>Condition show the datepicker in open state by default.</td>
</tr>
<tr>
<td>onInputInteraction</td>
<td>Function</td>
<td>null</td>
<td>Callback function when Datepicker HTML is refreshed.</td>
<td>Callback function on input field interaction.</td>
</tr>
</tbody>
</table>
Expand Down
50 changes: 25 additions & 25 deletions src/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
<div id="right" class="section scrollspy">
<p class="caption">
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
There are 2 main parts of the navbar. A logo or brand link, and the
navigations links. You can align these links to the left or right.
</p>
<h3 class="header">Right Aligned Links</h3>
Expand All @@ -23,7 +23,7 @@ <h3 class="header">Right Aligned Links</h3>
</code>
that contains them.
</p>
<nav>
<nav class="navbar">
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="brand-logo">Logo</a>
Expand All @@ -44,7 +44,7 @@ <h3 class="header">Right Aligned Links</h3>

<pre><code class="language-html">
<xmp>
<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
Expand All @@ -67,7 +67,7 @@ <h3 class="header">Left Aligned Links</h3>
</code>
that contains them.
</p>
<nav>
<nav class="navbar">
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="brand-logo right">Logo</a>
Expand All @@ -88,7 +88,7 @@ <h3 class="header">Left Aligned Links</h3>

<pre><code class="language-html">
<xmp>
<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#" class="brand-logo right">Logo</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
Expand Down Expand Up @@ -127,7 +127,7 @@ <h3 class="header">Centering the logo</h3>

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

<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#!" class="brand-logo center">Logo</a>
<ul class="left hide-on-med-and-down">
Expand All @@ -164,7 +164,7 @@ <h3 class="header">Active Items</h3>

<pre><code class="language-html">
<xmp>
<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#!" class="brand-logo center">Logo</a>
<ul class="left hide-on-med-and-down">
Expand All @@ -186,7 +186,7 @@ <h3 class="header">Extended Navbar with Tabs</h3>
can just include a tabs component inside the <span class="language-html">nav-wrapper</span>.
</p>

<nav class="nav-extended">
<nav class="navbar nav-extended">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger">
Expand Down Expand Up @@ -241,7 +241,7 @@ <h3 class="header">Extended Navbar with Tabs</h3>

<pre><code class="language-html">
<xmp>
<nav class="nav-extended">
<nav class="navbar nav-extended">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
Expand Down Expand Up @@ -286,7 +286,7 @@ <h3 class="header">Fixed Navbar</h3>
<pre><code class="language-html">
<xmp>
<div class="navbar-fixed">
<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
Expand Down Expand Up @@ -321,7 +321,7 @@ <h3 class="header">Navbar Dropdown Menu</h3>
<a href="#!">three</a>
</li>
</ul>
<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
Expand Down Expand Up @@ -351,7 +351,7 @@ <h3 class="header">Navbar Dropdown Menu</h3>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
Expand Down Expand Up @@ -386,7 +386,7 @@ <h5>Trigger dropdown menu on click</h5>
<div id="icons" class="section scrollspy">
<h3 class="header">Icon Links</h3>

<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#!" class="brand-logo"> <i class="material-icons">cloud</i>Logo</a>
<ul class="right hide-on-med-and-down">
Expand Down Expand Up @@ -419,7 +419,7 @@ <h3 class="header">Icon Links</h3>
</p>
<pre><code class="language-html">
<xmp>
<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#!" class="brand-logo"><i class="material-icons">cloud</i>Logo</a>
<ul class="right hide-on-med-and-down">
Expand All @@ -433,7 +433,7 @@ <h3 class="header">Icon Links</h3>
</xmp>
</code></pre>

<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
Expand All @@ -456,7 +456,7 @@ <h3 class="header">Icon Links</h3>
</p>
<pre><code class="language-html">
<xmp>
<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
Expand All @@ -472,7 +472,7 @@ <h3 class="header">Icon Links</h3>
<div id="buttons" class="section scrollspy">
<h3 class="header">Buttons</h3>

<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
Expand All @@ -498,7 +498,7 @@ <h3 class="header">Buttons</h3>
</p>
<pre><code class="language-html">
<xmp>
<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
Expand All @@ -514,7 +514,7 @@ <h3 class="header">Buttons</h3>
<h5>Halfway FAB in Extended Navbar</h5>
<p>Add a halfway FAB to your extended navbar.</p>

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

<pre><code class="language-html">
<xmp>
<nav class="nav-extended">
<nav class="navbar nav-extended">
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
Expand All @@ -562,7 +562,7 @@ <h5>Halfway FAB in Extended Navbar</h5>
<div id="search-docs" class="section scrollspy">
<h3 class="header">Search Bar</h3>

<nav>
<nav class="navbar">
<div class="nav-wrapper">
<form>
<div class="input-field">
Expand All @@ -579,7 +579,7 @@ <h3 class="header">Search Bar</h3>
<p>You can add a search form in the navbar.</p>
<pre><code class="language-html">
<xmp>
<nav>
<nav class="navbar">
<div class="nav-wrapper">
<form>
<div class="input-field">
Expand All @@ -597,7 +597,7 @@ <h3 class="header">Search Bar</h3>
<div id="mobile-collapse" class="section scrollspy">
<h3 class="header">Mobile Collapse Button</h3>

<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger">
Expand Down Expand Up @@ -647,7 +647,7 @@ <h3 class="header">Mobile Collapse Button</h3>
</p>
<pre><code class="language-html">
<xmp>
<nav>
<nav class="navbar">
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
Expand Down
6 changes: 6 additions & 0 deletions src/select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,12 @@ <h3 class="header">Options</h3>
<td>{}</td>
<td>Pass options object to select dropdown initialization.</td>
</tr>
<tr>
<td>selected</td>
<td>Array</td>
<td>[]</td>
<td>Default options to be selected on initialization</td>
</tr>
</tbody>
</table>
</div>
Expand Down
Loading