From 87b72037e49faad5ab88541cde226c89f13fade7 Mon Sep 17 00:00:00 2001 From: Daniel Wurzer Date: Thu, 26 Sep 2024 19:03:31 +0200 Subject: [PATCH 01/29] fix(dropdown): improve text and make action button more visible --- dropdown.html | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/dropdown.html b/dropdown.html index d8a6118..92f8e8c 100644 --- a/dropdown.html +++ b/dropdown.html @@ -13,14 +13,15 @@

Add a dropdown list to any button. Make sure that the - data-target attribute matches the id in the ul tag. You can add a divider with the - -

<li class="divider"></li> - - tag. You can also add icons. Just add the icon inside the + data-target attribute matches the id in the ul tag. You can add a divider with an empty li + element and a + divider + class. You can also add icons. Just add the icon inside the anchor tag.

- Drop Me! + + Drop Me! +
+ +
+

Icons

+

+ By default icons appear vertically centered. To diplay icons horizontally add .tabs-horizontal + class to the tabs container to indicate text position. +

+ + +

+ +

+ + 
    
+
+  <ul class="tabs tabs-fixed-width tab-demo tabs-horizontal z-depth-1">
+    <li class="tab"><a href="#image-test1"><i class="material-icons">flight</i>Flight</a></li>
+    <li class="tab"><a class="active" href="#image-test2"><i class="material-icons">luggage</i>Luggage</a></li>
+    <li class="tab"><a href="#image-test3"><i class="material-icons">explore</i>Explore</a></li>
+  </ul>              
+  <div id="image-test1" class="col s12"><p>Flight</p></div>
+  <div id="image-test2" class="col s12"><p>Luggage</p></div>
+  <div id="image-test3" class="col s12"><p>Explore</p></div>    
+
+
+
From 0085177991bacf6a6c803a3ec11191bea858732a Mon Sep 17 00:00:00 2001 From: Daniel Wurzer Date: Mon, 25 Nov 2024 08:17:56 +0100 Subject: [PATCH 14/29] ci: prepare versioning of docs --- .github/workflows/deploy.yml | 2 +- README.md | 10 +++++----- package.json | 2 +- packages/materialize | 2 +- vite.config.js | 4 +--- 5 files changed, 9 insertions(+), 11 deletions(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index c7f6e1e..4fb5a98 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -2,7 +2,7 @@ name: Deploy on: push: branches: - - v2-dev + # - v2-dev - main jobs: build: diff --git a/README.md b/README.md index d75fb8a..eecd5e3 100644 --- a/README.md +++ b/README.md @@ -40,9 +40,9 @@ pnpm preview - Execute the release process in the core package incl. releasing on npm - Switch to branch **v2-dev** and also pull newest package in [packages/materialize]() -- Update versions in [src/getting-started.html](), [partials/navbar.html]() -- Run docs locally and check manually -- Make commit to dev (message: "chore: release 2.X.X") -- Make PR from dev -> main -- Merge the PR +- Update version string in **package.json**, **src/getting-started.html**, **partials/navbar.html** +- Run docs locally and check manually with `pnpm dev` +- Make commit to v2-dev (message: "chore: release 2.X.X") +- Make PR from v2-dev -> main +- Merge the PR (The deploy step to gh-pages should be executed) - Spread news via social media channels diff --git a/package.json b/package.json index f6b851b..3169e25 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "dev": "vite", - "build": "tsc && vite build", + "build": "tsc && vite build && cp -r dist/version/latest/* dist && mv dist/version/latest dist/version/v2.1.1", "preview": "vite preview" }, "dependencies": { diff --git a/packages/materialize b/packages/materialize index cefdbf8..c8d916a 160000 --- a/packages/materialize +++ b/packages/materialize @@ -1 +1 @@ -Subproject commit cefdbf808a931899aec3501ee629f0ff049a648f +Subproject commit c8d916a1f9982552d9af1baabee1f407966dd09f diff --git a/vite.config.js b/vite.config.js index 443bd6c..e070e83 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,8 +4,6 @@ import handlebars from "vite-plugin-handlebars"; import { fileURLToPath } from "node:url"; import { config } from "./config.materialize"; -const version = "v2.1.1"; - let currentRoute = ""; function getMenuItem(item) { @@ -93,6 +91,6 @@ export default { }) ), }, - outDir: "./../dist" + ("/" + version), // relative to rootDir + outDir: "./../dist/version/latest", // relative to rootDir }, }; From e627bf74440b849249edd563cd09b0433f9ec256 Mon Sep 17 00:00:00 2001 From: Daniel Wurzer Date: Tue, 26 Nov 2024 09:15:57 +0100 Subject: [PATCH 15/29] chore: update dependencies --- packages/materialize | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/materialize b/packages/materialize index 1b536e1..0f49fee 160000 --- a/packages/materialize +++ b/packages/materialize @@ -1 +1 @@ -Subproject commit 1b536e1a0f1a9a70d751e22b9ac7f33c7738a539 +Subproject commit 0f49fee6665f6760b96cecc2506c33030cbd460a From 6f4f161d74ac7d4341bb28261562474d9f661e48 Mon Sep 17 00:00:00 2001 From: Daniel Wurzer Date: Thu, 28 Nov 2024 10:03:02 +0100 Subject: [PATCH 16/29] chore: update dependencies --- packages/materialize | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/materialize b/packages/materialize index 0f49fee..ecb57d3 160000 --- a/packages/materialize +++ b/packages/materialize @@ -1 +1 @@ -Subproject commit 0f49fee6665f6760b96cecc2506c33030cbd460a +Subproject commit ecb57d3225438b0bae083e82458ac76809bf7bbd From cc0c6e9d4459aa3c0a1850ff9fb7d99e2f2dfc7c Mon Sep 17 00:00:00 2001 From: Daniel Wurzer Date: Mon, 16 Dec 2024 15:06:19 +0100 Subject: [PATCH 17/29] docs: modal with dialog --- packages/materialize | 2 +- partials/navbar.html | 12 +++-- src/demo-page.html | 117 +++++++++++++++++++++++++++++++++++++------ src/main.ts | 7 +-- src/modals.html | 117 ++++++++++++++++++++----------------------- 5 files changed, 168 insertions(+), 87 deletions(-) diff --git a/packages/materialize b/packages/materialize index ecb57d3..712cdfc 160000 --- a/packages/materialize +++ b/packages/materialize @@ -1 +1 @@ -Subproject commit ecb57d3225438b0bae083e82458ac76809bf7bbd +Subproject commit 712cdfc7c3881bb5ca60e6fcb2168761fc0e9eb4 diff --git a/partials/navbar.html b/partials/navbar.html index 69f634b..56e1595 100644 --- a/partials/navbar.html +++ b/partials/navbar.html @@ -11,7 +11,7 @@ - @@ -396,9 +419,11 @@

Tabs in Cards

-
+
White
-
+
+
+

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.

@@ -424,9 +449,11 @@
White
-
+
Colored
-
+
+
+

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.

@@ -474,9 +501,11 @@

Card Sizes

-
+
Small
-
+
+
+
Card Title @@ -499,8 +528,10 @@
Small
-
+
Medium
+
+
@@ -524,8 +555,10 @@
Medium
-
+
Large
+
+
@@ -552,8 +585,10 @@
Large
-
+

Card Panel

+
+
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. I am similar to what is called a panel in other frameworks.
From ef83233aed6a412e9321fab8d7ea43c17e5c1f39 Mon Sep 17 00:00:00 2001 From: Daniel Wurzer Date: Tue, 17 Dec 2024 12:23:34 +0100 Subject: [PATCH 22/29] docs(Modal): update docs --- packages/materialize | 2 +- src/modals.html | 180 +++++++------------------------------------ 2 files changed, 29 insertions(+), 153 deletions(-) diff --git a/packages/materialize b/packages/materialize index 712cdfc..aae54a3 160000 --- a/packages/materialize +++ b/packages/materialize @@ -1 +1 @@ -Subproject commit 712cdfc7c3881bb5ca60e6fcb2168761fc0e9eb4 +Subproject commit aae54a332c7b9035aaafa1608a8f2f9b1d4949b8 diff --git a/src/modals.html b/src/modals.html index c2a13d9..bbb0dc1 100644 --- a/src/modals.html +++ b/src/modals.html @@ -15,18 +15,19 @@ Use a modal for dialog boxes, confirmation messages, or other content that can be called up. In order for the modal to work you have to add the Modal ID to the link of the trigger. To add a close button, just add the class .modal-close to your button. -
Upgrade from 2.1.1
+
Upgrade > 2.1.1
  • 1. search all elements with class="modal" and change the tagName to dialog
  • 2. add <div class="modal-header"></div> in front of the modal-content element and place title stuff in there if needed.
    • -
  • 3. replace data-target and triggers with onclick event handlers "id.showModal()"
    • +
  • 3. replace data-target and triggers with onclick event handlers like "id.showModal()" for non-dimissible and "element.show()" for dismissible dialogs.
  • 4. replace close-triggers with onclick event handlers "id.close()"

- - + + + @@ -177,128 +178,35 @@

Modals with Button trigger

Initialization

To open a modal using a trigger:

- 

-document.addEventListener('DOMContentLoaded', function() {
-  var elems = document.querySelectorAll('.modal');
-  var instances = M.Modal.init(elems, {
-    // specify options here
-  });
-});
-
+ 
// No need to initialize for versions > 2.1.1

Options

- You can customize the behavior of each modal using these options. For example, you can call a custom function to run when a modal is dismissed. To do this, just + Customize behavior of Modals via CSS. For example, you can call a custom function to run when a modal is dismissed. To do this, just place your function in the initialization code as shown below.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
opacityNumber0.5Opacity of the modal overlay.
inDurationNumber250Transition in duration in milliseconds.
outDurationNumber250Transition out duration in milliseconds.
onOpenStartFunctionnullCallback function called before modal is opened.
onOpenEndFunctionnullCallback function called after modal is opened.
onCloseStartFunctionnullCallback function called before modal is closed.
onCloseEndFunctionnullCallback function called after modal is closed.
preventScrollingBooleantruePrevent page from scrolling while modal is open.
dismissibleBooleantrueAllow modal to be dismissed by keyboard or overlay click.
startingTopString'4%'Starting top offset
endingTopString'10%'Ending top offset

Methods

All the methods are called on the plugin instance. You can get the plugin instance like this:

- 

-  var instance = M.Modal.getInstance(elem);
-
+ 
const modal = document.querySelector('#modal-1');
-
.open();
-

Open modal

- 

-instance.open();
-
-
.close();
-

Close modal

- 

-instance.close();
-
+
.show();
+

Open dismissible

+ 
modal.show();
-
.destroy();
-

Destroy plugin instance and teardown

- 

-instance.destroy();
-
+
.showModal();
+

Open non-dismissible

+ 
modal.showModal();
+ +
.close();
+

Close

+ 
modal.close();
@@ -311,27 +219,11 @@

Properties

Description - - el - Element - The DOM element the plugin was initialized with. - - - options - Object - The options the instance was initialized with. - - - isOpen - Boolean - If the modal is open. - - - id - string - ID of the modal element + - + - + See Html spec for more details. @@ -339,9 +231,7 @@

Properties

Bottom Sheet Modals

- -

Bottom Sheet Modals are good for displaying actions to the user on the bottom of a screen. They still act the same as regular modals.


 
@@ -366,27 +256,13 @@ <h4>Modal Header</h4>
             <div class="toc-wrapper">
               <div style="height: 1px">
                 <ul class="section table-of-contents">
-                  <li>
-                    <a href="#introduction">Introduction</a>
-                  </li>
-                  <li>
-                    <a href="#button-trigger">Button Trigger</a>
-                  </li>
-                  <li>
-                    <a href="#initialization">Initialization</a>
-                  </li>
-                  <li>
-                    <a href="#options">Options</a>
-                  </li>
-                  <li>
-                    <a href="#methods">Methods</a>
-                  </li>
-                  <li>
-                    <a href="#properties">Properties</a>
-                  </li>
-                  <li>
-                    <a href="#bottom-sheet">Bottom Sheet</a>
-                  </li>
+                  <li><a href="#introduction">Introduction</a></li>
+                  <li><a href="#button-trigger">Button Trigger</a></li>
+                  <li><a href="#initialization">Initialization</a></li>
+                  <li><a href="#options">Options</a></li>
+                  <li><a href="#methods">Methods</a></li>
+                  <li><a href="#properties">Properties</a>
+                  <li><a href="#bottom-sheet">Bottom Sheet</a></li>
                 </ul>
               </div>
             </div>

From 47aef4f397177a780237f22424cd8a5e91801c08 Mon Sep 17 00:00:00 2001
From: Daniel Wurzer <info@wuda.io>
Date: Mon, 23 Dec 2024 11:25:12 +0100
Subject: [PATCH 23/29] docs(pickers): update Api for date and timepicker

---
 src/pickers.html | 97 +++++++++++++++++-------------------------------
 1 file changed, 35 insertions(+), 62 deletions(-)

diff --git a/src/pickers.html b/src/pickers.html
index a227891..99ee398 100644
--- a/src/pickers.html
+++ b/src/pickers.html
@@ -13,22 +13,21 @@
             <div id="date-picker" class="section scrollspy">
               <h3 class="header">Date Picker</h3>
               <p>The datepicker allows users to select a date from an interactive calendar.</p>
+
               <div class="input-field">
                 <input id="birthdate" type="text" class="datepicker" placeholder=" " />
                 <label for="birthdate">Birthdate</label>
               </div>
-              <pre><code class="language-html"><xmp><input type="text" class="datepicker">
+ 
<input type="text" class="datepicker">
Initialization
- 

-  document.addEventListener('DOMContentLoaded', function() {
-    const elems = document.querySelectorAll('.datepicker');
-    const instances = M.Datepicker.init(elems, {
-      // specify options here
-    });
+                
document.addEventListener('DOMContentLoaded', function() {
+  const elems = document.querySelectorAll('.datepicker');
+  const instances = M.Datepicker.init(elems, {
+    // specify options here
   });
-          

+});
@@ -48,7 +47,7 @@
Options
autoClose Boolean false - Automatically close picker when date is selected. + DEPRECATED Automatically close picker when date is selected. format @@ -168,13 +167,13 @@
Options
onOpen Function null - Callback function when Datepicker is opened. + DEPRECATED Callback function when Datepicker is opened. onClose Function null - Callback function when Datepicker is closed. + DEPRECATED Callback function when Datepicker is closed. onDraw @@ -412,52 +411,40 @@
Methods

All the methods are called on the plugin instance. You can get the plugin instance like this:

- 

-                    const instance = M.Datepicker.getInstance(elem);
-
+ 
const instance = M.Datepicker.getInstance(elem);
.open();

Open datepicker

- 

-instance.open();
-
+ 
instance.open();
.close();

Close datepicker

- 

-instance.close();
-
+ 
instance.close();
.toString();

Gets a string representation of the selected date

- 

-instance.toString();
-
+ 
instance.toString();
.setDate();

Set a date on the datepicker

Arguments

Date (optional): Date to set on the datepicker.

- 

-instance.setDate(new Date());
-
+ 
instance.setDate(new Date());
.gotoDate();

Change date view to a specific date on the datepicker

Arguments

Date: Date to show on the datepicker.

- 

-instance.gotoDate(new Date());
-
+ 
instance.gotoDate(new Date());
.destroy();

Destroy plugin instance and teardown

- 

-instance.destroy();
-
+ 
instance.destroy();
+ +

Time Picker

The timepicker allows users to select a date from an interactive clock.

@@ -465,20 +452,16 @@

Time Picker

- 

-  
-
+ 
<input type="text" class="timepicker">
Initialization
- 

-  document.addEventListener('DOMContentLoaded', function() {
-    const elems = document.querySelectorAll('.timepicker');
-    const instances = M.Timepicker.init(elems, {
-      // specify options here
-    });
+                
document.addEventListener('DOMContentLoaded', function() {
+  const elems = document.querySelectorAll('.timepicker');
+  const instances = M.Timepicker.init(elems, {
+    // specify options here
   });
-          

+});
@@ -534,7 +517,7 @@
Options
autoClose Boolean false - Automatically close picker when minute is selected. + DEPRECATED Automatically close picker when minute is selected. twelveHour @@ -552,25 +535,25 @@
Options
onOpenStart Function null - Callback function called before modal is opened. + DEPRECATED Callback function called before modal is opened. onOpenEnd Function null - Callback function called after modal is opened. + DEPRECATED Callback function called after modal is opened. onCloseStart Function null - Callback function called before modal is closed. + DEPRECATED Callback function called before modal is closed. onCloseEnd Function null - Callback function called after modal is closed. + DEPRECATED Callback function called after modal is closed. onSelect @@ -651,35 +634,25 @@
Methods

All the methods are called on the plugin instance. You can get the plugin instance like this:

- 

-                    const instance = M.Timepicker.getInstance(elem);
-
+ 
const instance = M.Timepicker.getInstance(elem);
.open();

Open timepicker

- 

-instance.open();
-
+ 
instance.open();
.close();

Close timepicker

- 

-instance.close();
-
+ 
instance.close();
.showView();

Show hours or minutes view on timepicker

Arguments

String: The name of the view you want to switch to, 'hours' or 'minutes'.

- 

-instance.showView('hours');
-
+ 
instance.showView('hours');
.destroy();

Destroy plugin instance and teardown

- 

-instance.destroy();
-
+ 
instance.destroy();
From 1cc01a443590ecdae5824d815255d67594c16d76 Mon Sep 17 00:00:00 2001 From: Daniel Wurzer Date: Mon, 23 Dec 2024 12:05:56 +0100 Subject: [PATCH 24/29] docs: split pickers into date and time pages --- config.materialize.js | 33 ++- src/datepicker.html | 459 +++++++++++++++++++++++++++++ src/pickers.html | 664 +----------------------------------------- src/timepicker.html | 240 +++++++++++++++ 4 files changed, 725 insertions(+), 671 deletions(-) create mode 100644 src/datepicker.html create mode 100644 src/timepicker.html diff --git a/config.materialize.js b/config.materialize.js index ad5be9b..e67f12c 100644 --- a/config.materialize.js +++ b/config.materialize.js @@ -91,7 +91,24 @@ export const config = { { id: "autocomplete", url: "autocomplete.html", name: "Autocomplete" }, { id: "checkboxes", url: "checkboxes.html", name: "Checkboxes" }, { id: "chips", url: "chips.html", name: "Chips" }, - { id: "pickers", url: "pickers.html", name: "Pickers" }, + { + id: "pickers", + url: "pickers.html", + name: "Pickers", + description: "Controlling inputs in a more easy way and send date and time along with your form.", + }, + { + id: "datepicker", + url: "datepicker.html", + name: "Date Picker", + description: "Select single or multiple dates, ranges and more.", + }, + { + id: "timepicker", + url: "timepicker.html", + name: "Time Picker", + description: "Select a single time with the support of the awesome Timepicker.", + }, { id: "radiobuttons", url: "radio-buttons.html", name: "Radio Buttons" }, { id: "range", url: "range.html", name: "Range" }, { id: "select", url: "select.html", name: "Select" }, @@ -152,22 +169,14 @@ export const config = { { id: "tabs" }, { id: "toasts" }, { id: "tooltips" }, + { id: "datepicker" }, + { id: "timepicker" }, ], }, { name: "Forms", icon: "text_fields", - items: [ - { id: "autocomplete" }, - { id: "checkboxes" }, - { id: "chips" }, - { id: "pickers" }, - { id: "radiobuttons" }, - { id: "range" }, - { id: "select" }, - { id: "switches" }, - { id: "textinputs" }, - ], + items: [{ id: "autocomplete" }, { id: "checkboxes" }, { id: "chips" }, { id: "radiobuttons" }, { id: "range" }, { id: "select" }, { id: "switches" }, { id: "textinputs" }], }, { id: "mobile", icon: "mobile_friendly" }, ], diff --git a/src/datepicker.html b/src/datepicker.html new file mode 100644 index 0000000..d5627d7 --- /dev/null +++ b/src/datepicker.html @@ -0,0 +1,459 @@ + + + + {{> head }} + + + {{> navbar }} +
+ {{> intro}} +
+
+
+
+
+ + +
+ + 
<input type="text" class="datepicker">
+
+
Initialization
+ 
document.addEventListener('DOMContentLoaded', function() {
+  const elems = document.querySelectorAll('.datepicker');
+  const instances = M.Datepicker.init(elems, {
+    // specify options here
+  });
+});
+
+ +
+
Options
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
autoCloseBooleanfalseDEPRECATED Automatically close picker when date is selected.
formatString || Function'mmm dd, yyyy'The date output format for the input field value or a function taking the date and outputting the formatted date string.
parseFunctionnullUsed to create date object from current input string.
defaultDateDatenullThe initial date to view when first opened.
setDefaultDateBooleanfalseMake the defaultDate the initial selected value.
disableWeekendsBooleanfalsePrevent selection of any date on the weekend.
disableDayFnFunctionnullCustom function to disable certain days.
firstDayNumber0First day of week (0: Sunday, 1: Monday etc).
minDateDatenullThe earliest date that can be selected.
maxDateDatenullThe latest date that can be selected.
yearRangeNumber || Array10Number of years either side, or array of upper/lower range.
yearRangeReverseBooleanfalseSort year range in reverse order
isRTLBooleanfalseChanges Datepicker to RTL.
showMonthAfterYearBooleanfalseShow month after year in Datepicker title.
showDaysInNextAndPreviousMonthsBooleanfalseRender days of the calendar grid that fall in the next or previous month.
containerElement || StringnullSpecify a DOM element OR selector for a DOM element to render the calendar in, by default it will be placed before the input.
showClearBtnBooleanfalseShow the clear button in the datepicker.
i18nObjectSee i18n documentation.Internationalization options.
eventsArray[]An array of string returned by `Date.toDateString()`, indicating there are events in the specified days.
onSelectFunctionnullCallback function when date is selected, first parameter is the newly selected date.
onOpenFunctionnullDEPRECATED Callback function when Datepicker is opened.
onCloseFunctionnullDEPRECATED Callback function when Datepicker is closed.
onDrawFunctionnullCallback function when Datepicker HTML is refreshed.
+
+ +
+
Date format options
+

Use these in the format option to customize your date string.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyDescriptionOutput
dDate of the month.1-31
ddDate of the month (2 digits).01-31
dddDay of the week in short form set by the i18n option.Sun-Sat
ddddDay of the week in full form set by the i18n option.Sunday-Saturday
mMonth of the year.1-12
mmMonth of the year (2 digits).01-12
mmmMonth of the year in short form set by the i18n option.Jan-Dec
mmmmMonth of the year in full form set by the i18n option.January-December
yy2-digit year.17
yyyy4-digit year.2017
+
+ +
+
Datepicker Internationalization options
+

Use these in the i18n option to localize the datepicker.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyText
cancel'Cancel'
clear'Clear'
done'Ok'
previousMonth'‹'
nextMonth'›'
months + 
+[
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December'
+]
+
+
monthsShort + 
+[
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec'
+]
+
+
weekdays + 
+[
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday'
+]
+
+
weekdaysShort + 
+[
+  'Sun',
+  'Mon',
+  'Tue',
+  'Wed',
+  'Thu',
+  'Fri',
+  'Sat'
+]
+
+
weekdaysAbbrev['S','M','T','W','T','F','S']
+
+ +
+
Properties
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
elElementThe input element the plugin was initialized with.
optionsObjectThe options the instance was initialized with.
isOpenBooleanIf the picker is open.
dateDateThe selected Date.
+
+ +
+
Methods
+ +
+

All the methods are called on the plugin instance. You can get the plugin instance like this:

+ 
const instance = M.Datepicker.getInstance(elem);
+
+ +
.toString();
+

Gets a string representation of the selected date

+ 
instance.toString();
+ +
.setDate();
+

Set a date on the datepicker

+
Arguments
+

Date (optional): Date to set on the datepicker.

+ 
instance.setDate(new Date());
+ +
.gotoDate();
+

Change date view to a specific date on the datepicker

+
Arguments
+

Date: Date to show on the datepicker.

+ 
instance.gotoDate(new Date());
+ +
.destroy();
+

Destroy plugin instance and teardown

+ 
instance.destroy();
+ +
.open();
+

DEPRECATED Open datepicker

+
.close();
+

DEPRECATED Close datepicker

+
+
+
+ +
+
+
+ +
+
+
+
+
+
+ {{> footer }} + + + diff --git a/src/pickers.html b/src/pickers.html index 99ee398..00d018a 100644 --- a/src/pickers.html +++ b/src/pickers.html @@ -10,665 +10,11 @@
-
-

Date Picker

-

The datepicker allows users to select a date from an interactive calendar.

- -
- - -
- - 
<input type="text" class="datepicker">
-
-
Initialization
- 
document.addEventListener('DOMContentLoaded', function() {
-  const elems = document.querySelectorAll('.datepicker');
-  const instances = M.Datepicker.init(elems, {
-    // specify options here
-  });
-});
-
- -
-
Options
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
autoCloseBooleanfalseDEPRECATED Automatically close picker when date is selected.
formatString || Function'mmm dd, yyyy'The date output format for the input field value or a function taking the date and outputting the formatted date string.
parseFunctionnullUsed to create date object from current input string.
defaultDateDatenullThe initial date to view when first opened.
setDefaultDateBooleanfalseMake the defaultDate the initial selected value.
disableWeekendsBooleanfalsePrevent selection of any date on the weekend.
disableDayFnFunctionnullCustom function to disable certain days.
firstDayNumber0First day of week (0: Sunday, 1: Monday etc).
minDateDatenullThe earliest date that can be selected.
maxDateDatenullThe latest date that can be selected.
yearRangeNumber || Array10Number of years either side, or array of upper/lower range.
yearRangeReverseBooleanfalseSort year range in reverse order
isRTLBooleanfalseChanges Datepicker to RTL.
showMonthAfterYearBooleanfalseShow month after year in Datepicker title.
showDaysInNextAndPreviousMonthsBooleanfalseRender days of the calendar grid that fall in the next or previous month.
containerElement || StringnullSpecify a DOM element OR selector for a DOM element to render the calendar in, by default it will be placed before the input.
showClearBtnBooleanfalseShow the clear button in the datepicker.
i18nObjectSee i18n documentation.Internationalization options.
eventsArray[]An array of string returned by `Date.toDateString()`, indicating there are events in the specified days.
onSelectFunctionnullCallback function when date is selected, first parameter is the newly selected date.
onOpenFunctionnullDEPRECATED Callback function when Datepicker is opened.
onCloseFunctionnullDEPRECATED Callback function when Datepicker is closed.
onDrawFunctionnullCallback function when Datepicker HTML is refreshed.
-
- -
-
Date format options
-

Use these in the format option to customize your date string.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyDescriptionOutput
dDate of the month.1-31
ddDate of the month (2 digits).01-31
dddDay of the week in short form set by the i18n option.Sun-Sat
ddddDay of the week in full form set by the i18n option.Sunday-Saturday
mMonth of the year.1-12
mmMonth of the year (2 digits).01-12
mmmMonth of the year in short form set by the i18n option.Jan-Dec
mmmmMonth of the year in full form set by the i18n option.January-December
yy2-digit year.17
yyyy4-digit year.2017
-
- -
-
Datepicker Internationalization options
-

Use these in the i18n option to localize the datepicker.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyText
cancel'Cancel'
clear'Clear'
done'Ok'
previousMonth'‹'
nextMonth'›'
months - 
-[
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December'
-]
-
-
monthsShort - 
-[
-  'Jan',
-  'Feb',
-  'Mar',
-  'Apr',
-  'May',
-  'Jun',
-  'Jul',
-  'Aug',
-  'Sep',
-  'Oct',
-  'Nov',
-  'Dec'
-]
-
-
weekdays - 
-[
-  'Sunday',
-  'Monday',
-  'Tuesday',
-  'Wednesday',
-  'Thursday',
-  'Friday',
-  'Saturday'
-]
-
-
weekdaysShort - 
-[
-  'Sun',
-  'Mon',
-  'Tue',
-  'Wed',
-  'Thu',
-  'Fri',
-  'Sat'
-]
-
-
weekdaysAbbrev['S','M','T','W','T','F','S']
-
- -
-
Properties
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
elElementThe input element the plugin was initialized with.
optionsObjectThe options the instance was initialized with.
isOpenBooleanIf the picker is open.
dateDateThe selected Date.
-
- -
-
Methods
- -
-

All the methods are called on the plugin instance. You can get the plugin instance like this:

- 
const instance = M.Datepicker.getInstance(elem);
-
-
.open();
-

Open datepicker

- 
instance.open();
- -
.close();
-

Close datepicker

- 
instance.close();
- -
.toString();
-

Gets a string representation of the selected date

- 
instance.toString();
- -
.setDate();
-

Set a date on the datepicker

-
Arguments
-

Date (optional): Date to set on the datepicker.

- 
instance.setDate(new Date());
- -
.gotoDate();
-

Change date view to a specific date on the datepicker

-
Arguments
-

Date: Date to show on the datepicker.

- 
instance.gotoDate(new Date());
- -
.destroy();
-

Destroy plugin instance and teardown

- 
instance.destroy();
-
-
- - - -
-

Time Picker

-

The timepicker allows users to select a date from an interactive clock.

-
- - -
- 
<input type="text" class="timepicker">
- -
-
Initialization
- 
document.addEventListener('DOMContentLoaded', function() {
-  const elems = document.querySelectorAll('.timepicker');
-  const instances = M.Timepicker.init(elems, {
-    // specify options here
-  });
-});
-
- -
-
Options
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
durationNumber350Duration of the transition from/to the hours/minutes view.
containerElement || StringnullSpecify a DOM element OR selector for a DOM element to render the time picker in, by default it will be placed before the input.
showClearBtnBooleanfalseShow the clear button in the Timepicker.
defaultTimeString'now'Default time to set on the timepicker 'now' or '13:14'
fromNowNumber0Millisecond offset from the defaultTime.
i18nObjectSee i18n documentation.Internationalization options.
autoCloseBooleanfalseDEPRECATED Automatically close picker when minute is selected.
twelveHourBooleantrueUse 12 hour AM/PM clock instead of 24 hour clock.
vibrateBooleantrueVibrate device when dragging clock hand.
onOpenStartFunctionnullDEPRECATED Callback function called before modal is opened.
onOpenEndFunctionnullDEPRECATED Callback function called after modal is opened.
onCloseStartFunctionnullDEPRECATED Callback function called before modal is closed.
onCloseEndFunctionnullDEPRECATED Callback function called after modal is closed.
onSelectFunctionnullCallback function when a time is selected, first parameter is the hour and the second is the minute.
-
- -
-
Timepicker Internationalization options
-

Use these in the i18n option to localize the timepicker.

- - - - - - - - - - - - - - - - - - - - - - -
KeyText
cancel'Cancel'
clear'Clear'
done'Ok'
-
- -
-
Properties
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
elElementThe input element the plugin was initialized with.
optionsObjectThe options the instance was initialized with.
isOpenBooleanIf the picker is open.
timeStringThe selected time.
-
- -
-
Methods
- -
-

All the methods are called on the plugin instance. You can get the plugin instance like this:

- 
const instance = M.Timepicker.getInstance(elem);
-
-
.open();
-

Open timepicker

- 
instance.open();
- -
.close();
-

Close timepicker

- 
instance.close();
- -
.showView();
-

Show hours or minutes view on timepicker

-
Arguments
-

String: The name of the view you want to switch to, 'hours' or 'minutes'.

- 
instance.showView('hours');
- -
.destroy();
-

Destroy plugin instance and teardown

- 
instance.destroy();
-
-
-
- -
-
-
- -
+

Pickers

+

Pickers have now their own pages. Check out:

+
+ Date Picker send + Time Picker send
diff --git a/src/timepicker.html b/src/timepicker.html new file mode 100644 index 0000000..3a72ef7 --- /dev/null +++ b/src/timepicker.html @@ -0,0 +1,240 @@ + + + + {{> head }} + + + {{> navbar }} +
+ {{> intro}} +
+
+
+ + +
+
+ + +
+ 
<input type="text" class="timepicker">
+ +
+
Initialization
+ 
document.addEventListener('DOMContentLoaded', function() {
+  const elems = document.querySelectorAll('.timepicker');
+  const instances = M.Timepicker.init(elems, {
+    // specify options here
+  });
+});
+
+ +
+
Options
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
durationNumber350Duration of the transition from/to the hours/minutes view.
containerElement || StringnullSpecify a DOM element OR selector for a DOM element to render the time picker in, by default it will be placed before the input.
showClearBtnBooleanfalseShow the clear button in the Timepicker.
defaultTimeString'now'Default time to set on the timepicker 'now' or '13:14'
fromNowNumber0Millisecond offset from the defaultTime.
i18nObjectSee i18n documentation.Internationalization options.
autoCloseBooleanfalseDEPRECATED Automatically close picker when minute is selected.
twelveHourBooleantrueUse 12 hour AM/PM clock instead of 24 hour clock.
vibrateBooleantrueVibrate device when dragging clock hand.
onOpenStartFunctionnullDEPRECATED Callback function called before modal is opened.
onOpenEndFunctionnullDEPRECATED Callback function called after modal is opened.
onCloseStartFunctionnullDEPRECATED Callback function called before modal is closed.
onCloseEndFunctionnullDEPRECATED Callback function called after modal is closed.
onSelectFunctionnullCallback function when a time is selected, first parameter is the hour and the second is the minute.
+
+ +
+
Timepicker Internationalization options
+

Use these in the i18n option to localize the timepicker.

+ + + + + + + + + + + + + + + + + + + + + + +
KeyText
cancel'Cancel'
clear'Clear'
done'Ok'
+
+ +
+
Properties
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
elElementThe input element the plugin was initialized with.
optionsObjectThe options the instance was initialized with.
isOpenBooleanIf the picker is open.
timeStringThe selected time.
+
+ +
+
Methods
+ +
+

All the methods are called on the plugin instance. You can get the plugin instance like this:

+ 
const instance = M.Timepicker.getInstance(elem);
+
+ +
.showView();
+

Show hours or minutes view on timepicker

+
Arguments
+

String: The name of the view you want to switch to, 'hours' or 'minutes'.

+ 
instance.showView('hours');
+ +
.destroy();
+

Destroy plugin instance and teardown

+ 
instance.destroy();
+ +
.open();
+

DEPRECATED Open timepicker

+
.close();
+

DEPRECATED Close timepicker

+
+
+
+ +
+
+
+ +
+
+
+
+
+
+ {{> footer }} + + + From 92c5ff5a149f9725ccf4870f7957093333c6f10c Mon Sep 17 00:00:00 2001 From: Daniel Wurzer Date: Mon, 23 Dec 2024 12:13:26 +0100 Subject: [PATCH 25/29] docs: clean --- src/fab-toolbar-demo.html | 37 -------------- src/floating-action-button.html | 87 ++++++++------------------------- 2 files changed, 20 insertions(+), 104 deletions(-) delete mode 100644 src/fab-toolbar-demo.html diff --git a/src/fab-toolbar-demo.html b/src/fab-toolbar-demo.html deleted file mode 100644 index be98519..0000000 --- a/src/fab-toolbar-demo.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - {{> head }} - - -
- - mode_edit - - -
- - - - - - - - diff --git a/src/floating-action-button.html b/src/floating-action-button.html index 7e38898..f839afe 100644 --- a/src/floating-action-button.html +++ b/src/floating-action-button.html @@ -43,20 +43,14 @@

Initialization

             Copied!
             content_copy
-            
-  document.addEventListener('DOMContentLoaded', function() {
-    const elems = document.querySelectorAll('.fixed-action-btn');
-    const instances = M.FloatingActionButton.init(elems, {
-      // specify options here
-    });
+document.addEventListener('DOMContentLoaded', function() {
+  const elems = document.querySelectorAll('.fixed-action-btn');
+  const instances = M.FloatingActionButton.init(elems, {
+    // specify options here
   });
-            
-
- +});
- -

Options

@@ -68,7 +62,6 @@

Options

- @@ -90,11 +83,8 @@

Options

Description
direction
-
- -
Methods
@@ -102,40 +92,28 @@
Methods
               Copied!
               content_copy
-              
-                const instance = M.FloatingActionButton.getInstance(elem);
-            
+              const instance = M.FloatingActionButton.getInstance(elem);
.open();

Opens FAB.

- 

-instance.open();
-
+ 
instance.open();
-
.close();

Closes FAB.

- 

-instance.close();
-
+ 
instance.close();
-
.destroy();

Destroy plugin instance and teardown

- 

-instance.destroy();
-
+ 
instance.destroy();
- -

Properties

@@ -146,7 +124,6 @@

Properties

- @@ -167,8 +144,6 @@

Properties

Description
el
- -

Horizontal FAB

Creating a horizontal FAB is easy! Just set the direction option.

@@ -204,15 +179,12 @@

Horizontal FAB

           Copied!
           content_copy
-          
-  document.addEventListener('DOMContentLoaded', function() {
-    const elems = document.querySelectorAll('.fixed-action-btn');
-    const instances = M.FloatingActionButton.init(elems, {
-      direction: 'left'
-    });
+          document.addEventListener('DOMContentLoaded', function() {
+  const elems = document.querySelectorAll('.fixed-action-btn');
+  const instances = M.FloatingActionButton.init(elems, {
+    direction: 'left'
   });
-          
-
+});
@@ -243,8 +215,6 @@

Horizontal FAB

- -

Click-only FAB

If you want to disable the hover behaviour, and instead toggle the FAB menu when the user clicks on the large button @@ -282,35 +252,18 @@

Click-only FAB

           Copied!
           content_copy
-          
-  document.addEventListener('DOMContentLoaded', function() {
-    const elems = document.querySelectorAll('.fixed-action-btn');
-    const instances = M.FloatingActionButton.init(elems, {
-      direction: 'left',
-      hoverEnabled: false
-    });
+          document.addEventListener('DOMContentLoaded', function() {
+  const elems = document.querySelectorAll('.fixed-action-btn');
+  const instances = M.FloatingActionButton.init(elems, {
+    direction: 'left',
+    hoverEnabled: false
   });
-          
-
+});

FAB to Toolbar

Deprecated since Version 2.1.0!

-

Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Just add the - toolbar class to the FAB.

- - 
-          Copied!
-          content_copy
-          
-  document.addEventListener('DOMContentLoaded', function() {
-    const elems = document.querySelectorAll('.fixed-action-btn');
-    const instances = M.FloatingActionButton.init(elems, {
-      toolbarEnabled: true
-    });
-  });
-
From 8949ce599db6924c0c2302d89904d7132ae7b77a Mon Sep 17 00:00:00 2001 From: Daniel Wurzer Date: Mon, 23 Dec 2024 12:39:57 +0100 Subject: [PATCH 26/29] docs(modal): use popover instead of dialog --- src/modals.html | 83 ++++++++++++++++++------------------------------- 1 file changed, 31 insertions(+), 52 deletions(-) diff --git a/src/modals.html b/src/modals.html index a55d787..5e23165 100644 --- a/src/modals.html +++ b/src/modals.html @@ -13,24 +13,22 @@ - + - +
- + - + 

-
-<!-- Modal Trigger -->
-<button class="btn waves-effect waves-light" onclick="modal1.showModal()">Show Modal</button>
-<!-- Modal Structure -->
-<dialog id="modal1" class="modal">
+<xmp><button class="btn waves-effect waves-light" popovertarget="modal1">Show</button>
+<a class="btn tonal" href="javascript:modal1.showPopover()">Show via Link</a>
+
+<div id="modal1" class="modal" popover>
   <div class="modal-header">
     <h4>Modal Header</h4>
   </div>
@@ -158,22 +155,11 @@ <h4>Modal Header</h4>
     <p>A bunch of text</p>
   </div>
   <div class="modal-footer">
-    <a href="#!" tabindex="0" class="modal-close waves-effect btn-flat">Agree</a>
+    <button tabindex="0" class="waves-effect btn-flat" popovertarget="modal1">Agree</button>
   </div>
-</dialog>
-
-
- -
-

Modals with Button trigger

-

You can open the modal by id with modal1.showModal() where modal1 is the ElementId.

- 

-
-<!-- Modal Trigger -->
-<button class="btn" onclick="modal1.showModal()">Show Modal</button>
+</div>
-

Initialization

@@ -204,17 +190,13 @@

Methods

const modal = document.querySelector('#modal-1');
-
.show();
+
.showPopover();

Open dismissible

- 
modal.show();
+ 
modal.showPopover();
-
.showModal();
-

Open non-dismissible

- 
modal.showModal();
- -
.close();
+
.hidePopover();

Close

- 
modal.close();
+ 
modal.hidePopover();
@@ -231,7 +213,7 @@

Properties

- - - See Html spec for more details. + Check out the Popover API for more details. @@ -239,21 +221,19 @@

Properties

Bottom Sheet Modals

- +

Bottom Sheet Modals are good for displaying actions to the user on the bottom of a screen. They still act the same as regular modals.


-
-<!-- Modal Trigger -->
-<a class="btn tonal waves-effect waves-light" href="#" onclick="modal1.showModal(); return false;">Show BottomSheet Modal</a>
-<!-- Modal Structure -->
-<dialog id="modal1" class="modal bottom-sheet">
+<xmp><a class="btn tonal waves-effect waves-light" href="javascript:modal1.showPopover()">Show BottomSheet Modal</a>
+
+<div id="modal1" class="modal bottom-sheet" popover>
   <div class="modal-header">
     <h4>Modal Header</h4>
   </div>
   <div class="modal-content">
     <p>A bunch of text</p>
   </div>
-</dialog>
+</div>
@@ -265,7 +245,6 @@

Modal Header

  • Introduction
    • -
  • Button Trigger
  • Initialization
  • Options
  • Methods
    • From 99f8d4fd1cb6b080604eda154298dbb998ad54d2 Mon Sep 17 00:00:00 2001 From: Daniel Wurzer Date: Mon, 23 Dec 2024 12:58:45 +0100 Subject: [PATCH 27/29] chore: update submodule --- packages/materialize | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/materialize b/packages/materialize index 8126c67..f2bfa3f 160000 --- a/packages/materialize +++ b/packages/materialize @@ -1 +1 @@ -Subproject commit 8126c679e6b7832015da4302740447a98d71964d +Subproject commit f2bfa3f69a260b32bb5133136488bd7b41534bb4 From 1b4ff7828741b6db49f2d5bea191b88d5f0d526a Mon Sep 17 00:00:00 2001 From: Daniel Wurzer Date: Mon, 23 Dec 2024 15:21:41 +0100 Subject: [PATCH 28/29] chore: update dependencies --- packages/materialize | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/materialize b/packages/materialize index f2bfa3f..0718493 160000 --- a/packages/materialize +++ b/packages/materialize @@ -1 +1 @@ -Subproject commit f2bfa3f69a260b32bb5133136488bd7b41534bb4 +Subproject commit 071849357b2c79670fd299d1320f3c7c9f347954 From 0b90d83feef7e689ff7f3f1fd5ce227f90464c00 Mon Sep 17 00:00:00 2001 From: Daniel Wurzer Date: Mon, 23 Dec 2024 15:34:11 +0100 Subject: [PATCH 29/29] chore: release 2.0.0 --- package.json | 2 +- partials/navbar.html | 8 +++----- src/getting-started.html | 10 +++++----- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 3169e25..0392c28 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "dev": "vite", - "build": "tsc && vite build && cp -r dist/version/latest/* dist && mv dist/version/latest dist/version/v2.1.1", + "build": "tsc && vite build && cp -r dist/version/latest/* dist && mv dist/version/latest dist/version/v2.2.0", "preview": "vite preview" }, "dependencies": { diff --git a/partials/navbar.html b/partials/navbar.html index 56e1595..9ca43ed 100644 --- a/partials/navbar.html +++ b/partials/navbar.html @@ -50,19 +50,17 @@
  • - v2.1.1 + v2.2.0
diff --git a/src/getting-started.html b/src/getting-started.html index 505a319..2024d64 100644 --- a/src/getting-started.html +++ b/src/getting-started.html @@ -1,4 +1,4 @@ - + {{> head }} @@ -31,7 +31,7 @@
Materialize
tabindex="0" id="download-source" class="btn filled waves-effect waves-light icon-right" - href="https://github.com/materializecss/materialize/releases/download/v2.1.1/materialize-v2.1.1.zip" + href="https://github.com/materializecss/materialize/releases/download/v2.2.0/materialize-v2.2.0.zip" > Materializefile_download @@ -46,7 +46,7 @@
Sass
tabindex="0" id="download-sass" class="btn outlined waves-effect waves-light icon-right" - href="https://github.com/materializecss/materialize/releases/download/v2.1.1/materialize-src-v2.1.1.zip" + href="https://github.com/materializecss/materialize/releases/download/v2.2.0/materialize-src-v2.2.0.zip" > Sourcefile_download @@ -80,9 +80,9 @@
CDN
Copied! content_copy <!-- Compiled and minified CSS --> -<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.1.1/dist/css/materialize.min.css"> +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.2.0/dist/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> -<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.1.1/dist/js/materialize.min.js"></script> +<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.2.0/dist/js/materialize.min.js"></script>