mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-06-28 14:20:12 +00:00
Update Materialize-css definitions to version 0.100.1 (#18316)
* Definitions updated to version 0.100.1 * Reverted TypeScript version to 2.3.0 to correct CI build * fix TypeScript version once more * Format using tabs
This commit is contained in:
Sukhdeep Singh
committed by
Mohamed Hegazy
Mohamed Hegazy
parent
93b267aec8
commit
5a4f1ea15f
1113
types/materialize-css/index.d.ts
vendored
1113
types/materialize-css/index.d.ts
vendored
File diff suppressed because it is too large
Load Diff
@@ -13,8 +13,8 @@ $('select').material_select('destroy');
|
||||
// Forms - Date Picker
|
||||
|
||||
$('.datepicker').pickadate({
|
||||
selectMonths: true, // Creates a dropdown to control month
|
||||
selectYears: 15 // Creates a dropdown of 15 years to control year
|
||||
selectMonths: true, // Creates a dropdown to control month
|
||||
selectYears: 15 // Creates a dropdown of 15 years to control year
|
||||
});
|
||||
|
||||
// Forms - Character Counter
|
||||
@@ -30,19 +30,19 @@ $(".button-collapse").sideNav();
|
||||
|
||||
// Collapsible
|
||||
var collapseHtml = '<ul class="collapsible" data-collapsible="accordion">' +
|
||||
'<li>' +
|
||||
'<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>' +
|
||||
'<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>' +
|
||||
'</li>' +
|
||||
'<li>' +
|
||||
'<div class="collapsible-header"><i class="material-icons">place</i>Second</div>' +
|
||||
'<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>' +
|
||||
'</li>' +
|
||||
'<li>' +
|
||||
'<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>' +
|
||||
'<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>' +
|
||||
'</li>' +
|
||||
'</ul>';
|
||||
'<li>' +
|
||||
'<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>' +
|
||||
'<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>' +
|
||||
'</li>' +
|
||||
'<li>' +
|
||||
'<div class="collapsible-header"><i class="material-icons">place</i>Second</div>' +
|
||||
'<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>' +
|
||||
'</li>' +
|
||||
'<li>' +
|
||||
'<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>' +
|
||||
'<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>' +
|
||||
'</li>' +
|
||||
'</ul>';
|
||||
|
||||
$(collapseHtml).collapsible({ accordion: false, onClose: function () { alert('Closed'); } });
|
||||
$(collapseHtml).collapsible({ accordion: true, onOpen: function () { alert('Opened'); } });
|
||||
@@ -53,6 +53,7 @@ Materialize.toast('I am a toast!', 3000, 'rounded');
|
||||
Materialize.toast('I am a toast!', 3000, 'rounded', () => console.log('callback'));
|
||||
var $toastContent = $('<span>I am toast content</span>');
|
||||
Materialize.toast($toastContent, 5000);
|
||||
Materialize.Toast.removeAll();
|
||||
|
||||
// Dialogs - Tooltip
|
||||
var tooltipHtml = '<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>';
|
||||
@@ -63,14 +64,14 @@ $(tooltipHtml).tooltip('remove');
|
||||
// DropDown
|
||||
var dropDownHtml = '<a class="dropdown-button btn" data-beloworigin="true" href="#" data-activates="dropdown1">Drop Me!</a>';
|
||||
$(dropDownHtml).dropdown({
|
||||
inDuration: 300,
|
||||
outDuration: 225,
|
||||
constrainWidth: false, // Does not change width of dropdown to that of the activator
|
||||
hover: true, // Activate on hover
|
||||
gutter: 0, // Spacing from edge
|
||||
belowOrigin: false, // Displays dropdown below the button
|
||||
alignment: 'left', // Displays dropdown with edge aligned to the left of button
|
||||
stopPropagation: false // Stops event propagation
|
||||
inDuration: 300,
|
||||
outDuration: 225,
|
||||
constrainWidth: false, // Does not change width of dropdown to that of the activator
|
||||
hover: true, // Activate on hover
|
||||
gutter: 0, // Spacing from edge
|
||||
belowOrigin: false, // Displays dropdown below the button
|
||||
alignment: 'left', // Displays dropdown with edge aligned to the left of button
|
||||
stopPropagation: false // Stops event propagation
|
||||
|
||||
});
|
||||
$(dropDownHtml).dropdown({});
|
||||
@@ -81,37 +82,37 @@ $(materialboxHtml).materialbox();
|
||||
|
||||
// Media - slider
|
||||
var sliderHtml = '<div class="slider">' +
|
||||
'<ul class="slides">' +
|
||||
'<li>' +
|
||||
'<img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->' +
|
||||
'<div class="caption center-align">' +
|
||||
'<h3>This is our big Tagline!</h3>' +
|
||||
'<h5 class="light grey-text text-lighten-3">Here\'s our small slogan.</h5>' +
|
||||
'</div>' +
|
||||
'</li>' +
|
||||
'<li>' +
|
||||
'<img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->' +
|
||||
'<div class="caption left-align">' +
|
||||
'<h3>Left Aligned Caption</h3>' +
|
||||
'<h5 class="light grey-text text-lighten-3">Here\'s our small slogan.</h5>' +
|
||||
'</div>' +
|
||||
'</li>' +
|
||||
'<li>' +
|
||||
'<img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->' +
|
||||
'<div class="caption right-align">' +
|
||||
'<h3>Right Aligned Caption</h3>' +
|
||||
'<h5 class="light grey-text text-lighten-3">Here\'s our small slogan.</h5>' +
|
||||
'</div>' +
|
||||
'</li>' +
|
||||
'<li>' +
|
||||
'<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->' +
|
||||
'<div class="caption center-align">' +
|
||||
'<h3>This is our big Tagline!</h3>' +
|
||||
'<h5 class="light grey-text text-lighten-3">Here\'s our small slogan.</h5>' +
|
||||
'</div>' +
|
||||
'</li>' +
|
||||
'</ul>' +
|
||||
'</div>';
|
||||
'<ul class="slides">' +
|
||||
'<li>' +
|
||||
'<img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->' +
|
||||
'<div class="caption center-align">' +
|
||||
'<h3>This is our big Tagline!</h3>' +
|
||||
'<h5 class="light grey-text text-lighten-3">Here\'s our small slogan.</h5>' +
|
||||
'</div>' +
|
||||
'</li>' +
|
||||
'<li>' +
|
||||
'<img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->' +
|
||||
'<div class="caption left-align">' +
|
||||
'<h3>Left Aligned Caption</h3>' +
|
||||
'<h5 class="light grey-text text-lighten-3">Here\'s our small slogan.</h5>' +
|
||||
'</div>' +
|
||||
'</li>' +
|
||||
'<li>' +
|
||||
'<img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->' +
|
||||
'<div class="caption right-align">' +
|
||||
'<h3>Right Aligned Caption</h3>' +
|
||||
'<h5 class="light grey-text text-lighten-3">Here\'s our small slogan.</h5>' +
|
||||
'</div>' +
|
||||
'</li>' +
|
||||
'<li>' +
|
||||
'<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->' +
|
||||
'<div class="caption center-align">' +
|
||||
'<h3>This is our big Tagline!</h3>' +
|
||||
'<h5 class="light grey-text text-lighten-3">Here\'s our small slogan.</h5>' +
|
||||
'</div>' +
|
||||
'</li>' +
|
||||
'</ul>' +
|
||||
'</div>';
|
||||
|
||||
$(sliderHtml).slider();
|
||||
$(sliderHtml).slider({});
|
||||
@@ -136,16 +137,19 @@ $('.carousel').carousel('prev', 4); // Move prev n times.
|
||||
|
||||
// Modals
|
||||
var modalhtml = '<div id="modal1" class="modal bottom-sheet">' +
|
||||
'<div class="modal-content">' +
|
||||
'<h4>Modal Header</h4>' +
|
||||
'<p>A bunch of text</p>' +
|
||||
'</div>' +
|
||||
'<div class="modal-footer">' +
|
||||
'<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
'<div class="modal-content">' +
|
||||
'<h4>Modal Header</h4>' +
|
||||
'<p>A bunch of text</p>' +
|
||||
'</div>' +
|
||||
'<div class="modal-footer">' +
|
||||
'<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
$(modalhtml).modal('open');
|
||||
$(modalhtml).modal('close');
|
||||
$(modalhtml).modal('open', {
|
||||
complete: function () { console.log('model close event') } // Callback for Modal close
|
||||
});
|
||||
|
||||
var modalTriggerHtml = '<button data-target="modal1" class="btn modal-trigger">Modal</button>';
|
||||
$(modalTriggerHtml).modal();
|
||||
@@ -161,8 +165,8 @@ $(modalTriggerHtml).modal({ dismissible: true, opacity: 1, inDuration: 100, outD
|
||||
|
||||
// Parallax
|
||||
var parallaxHtml = '<div class="parallax-container">' +
|
||||
'<div class="parallax"><img src="images/parallax1.jpg"></div>' +
|
||||
'</div>';
|
||||
'<div class="parallax"><img src="images/parallax1.jpg"></div>' +
|
||||
'</div>';
|
||||
$(parallaxHtml).parallax();
|
||||
|
||||
// PushPin
|
||||
@@ -173,46 +177,26 @@ $('<div />').pushpin({ top: 1, bottom: 1, offset: 2 });
|
||||
|
||||
// ScrollFire
|
||||
var options = [
|
||||
{ selector: '.class', offset: 200, callback: 'console.log(".class")' },
|
||||
{ selector: '.other-class', offset: 200, callback: 'console.log(".other-class")' },
|
||||
{ selector: '.class', offset: 200, callback: 'console.log(".class")' },
|
||||
{ selector: '.other-class', offset: 200, callback: 'console.log(".other-class")' },
|
||||
];
|
||||
Materialize.scrollFire(options);
|
||||
|
||||
// ScrollSpy
|
||||
var scrollSpyHtml = '<div class="row">' +
|
||||
'<div class="col s12 m9 l10">' +
|
||||
'<div id="introduction" class="section scrollspy">' +
|
||||
'<p>Content </p>' +
|
||||
'</div>' +
|
||||
'<div id="structure" class="section scrollspy">' +
|
||||
'<p>Content </p>' +
|
||||
'</div>' +
|
||||
'<div id="initialization" class="section scrollspy">' +
|
||||
'<p>Content </p>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="col hide-on-small-only m3 l2">' +
|
||||
'<ul class="section table-of-contents">' +
|
||||
'<li><a href="#introduction">Introduction</a></li>' +
|
||||
'<li><a href="#structure">Structure</a></li>' +
|
||||
'<li><a href="#initialization">Intialization</a></li>' +
|
||||
'</ul>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
// $(scrollSpyHtml, ".scrollspy").scrollSpy();
|
||||
|
||||
$(".scrollspy").scrollSpy();
|
||||
|
||||
// Side-Nav
|
||||
var sideNavHtml = '<nav>' +
|
||||
'<ul class="right hide-on-med-and-down">' +
|
||||
'<li><a href="#!">First Sidebar Link</a></li>' +
|
||||
'<li><a href="#!">Second Sidebar Link</a></li>' +
|
||||
'</ul>' +
|
||||
'<ul id="slide-out" class="side-nav">' +
|
||||
'<li><a href="#!">First Sidebar Link</a></li>' +
|
||||
'<li><a href="#!">Second Sidebar Link</a></li>' +
|
||||
'</ul>' +
|
||||
'<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>' +
|
||||
'</nav>';
|
||||
'<ul class="right hide-on-med-and-down">' +
|
||||
'<li><a href="#!">First Sidebar Link</a></li>' +
|
||||
'<li><a href="#!">Second Sidebar Link</a></li>' +
|
||||
'</ul>' +
|
||||
'<ul id="slide-out" class="side-nav">' +
|
||||
'<li><a href="#!">First Sidebar Link</a></li>' +
|
||||
'<li><a href="#!">Second Sidebar Link</a></li>' +
|
||||
'</ul>' +
|
||||
'<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>' +
|
||||
'</nav>';
|
||||
$(sideNavHtml).sideNav();
|
||||
$(sideNavHtml).sideNav({});
|
||||
$(sideNavHtml).sideNav({ menuWidth: 100 });
|
||||
@@ -224,19 +208,19 @@ $(sideNavHtml).sideNav("hide");
|
||||
|
||||
// Tabs
|
||||
var tabsHtml = '<div class="row">' +
|
||||
'<div class="col s12">' +
|
||||
'<ul class="tabs">' +
|
||||
'<li class="tab col s3"><a href="#test1">Test 1</a></li>' +
|
||||
'<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>' +
|
||||
'<li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>' +
|
||||
'<li class="tab col s3"><a href="#test4">Test 4</a></li>' +
|
||||
'</ul>' +
|
||||
'</div>' +
|
||||
'<div id="test1" class="col s12">Test 1</div>' +
|
||||
'<div id="test2" class="col s12">Test 2</div>' +
|
||||
'<div id="test3" class="col s12">Test 3</div>' +
|
||||
'<div id="test4" class="col s12">Test 4</div>' +
|
||||
'</div>';
|
||||
'<div class="col s12">' +
|
||||
'<ul class="tabs">' +
|
||||
'<li class="tab col s3"><a href="#test1">Test 1</a></li>' +
|
||||
'<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>' +
|
||||
'<li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>' +
|
||||
'<li class="tab col s3"><a href="#test4">Test 4</a></li>' +
|
||||
'</ul>' +
|
||||
'</div>' +
|
||||
'<div id="test1" class="col s12">Test 1</div>' +
|
||||
'<div id="test2" class="col s12">Test 2</div>' +
|
||||
'<div id="test3" class="col s12">Test 3</div>' +
|
||||
'<div id="test4" class="col s12">Test 4</div>' +
|
||||
'</div>';
|
||||
|
||||
$(tabsHtml).tabs();
|
||||
$(tabsHtml).tabs('select_tab', 'test1');
|
||||
@@ -248,31 +232,71 @@ Materialize.showStaggeredList('#staggered-test');
|
||||
Materialize.updateTextFields();
|
||||
|
||||
let chipsHTML = '<div class="chips"></div>' +
|
||||
'<div class="chips chips-initial"></div>' +
|
||||
'<div class="chips chips-placeholder"></div>' +
|
||||
'<div class="chips chips-autocomplete"></div>';
|
||||
'<div class="chips chips-initial"></div>' +
|
||||
'<div class="chips chips-placeholder"></div>' +
|
||||
'<div class="chips chips-autocomplete"></div>';
|
||||
|
||||
$(chipsHTML).material_chip();
|
||||
$(chipsHTML).material_chip({
|
||||
data: [{
|
||||
tag: 'Apple',
|
||||
}, {
|
||||
tag: 'Microsoft',
|
||||
}, {
|
||||
tag: 'Google',
|
||||
}],
|
||||
data: [{
|
||||
tag: 'Apple',
|
||||
}, {
|
||||
tag: 'Microsoft',
|
||||
}, {
|
||||
tag: 'Google',
|
||||
}],
|
||||
});
|
||||
|
||||
$('.chips-placeholder').material_chip({
|
||||
placeholder: 'Enter a tag',
|
||||
secondaryPlaceholder: '+Tag',
|
||||
placeholder: 'Enter a tag',
|
||||
secondaryPlaceholder: '+Tag',
|
||||
});
|
||||
$('.chips-autocomplete').material_chip({
|
||||
autocompleteData: {
|
||||
'Apple': null,
|
||||
'Microsoft': null,
|
||||
'Google': null
|
||||
}
|
||||
autocompleteData: {
|
||||
'Apple': null,
|
||||
'Microsoft': null,
|
||||
'Google': null
|
||||
}
|
||||
});
|
||||
|
||||
$('.chips-autocomplete').material_chip({
|
||||
autocompleteOptions: {
|
||||
data: {
|
||||
'Apple': null,
|
||||
'Microsoft': null,
|
||||
'Google': null
|
||||
},
|
||||
limit: Infinity,
|
||||
minLength: 1
|
||||
}
|
||||
});
|
||||
|
||||
let chipData: Materialize.ChipDataObject | Materialize.ChipDataObject[] = $('.chips-initial').material_chip('data');
|
||||
|
||||
$('.timepicker').pickatime({
|
||||
default: 'now', // Set default time: 'now', '1:30AM', '16:30'
|
||||
fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
|
||||
twelvehour: false, // Use AM/PM or 24-hour format
|
||||
donetext: 'OK', // text for done-button
|
||||
cleartext: 'Clear', // text for clear-button
|
||||
canceltext: 'Cancel', // Text for cancel-button
|
||||
autoclose: false, // automatic close timepicker
|
||||
ampmclickable: true, // make AM PM clickable
|
||||
aftershow: function () { } //Function for after opening timepicker
|
||||
});
|
||||
|
||||
$('input.autocomplete').autocomplete({
|
||||
data: {
|
||||
"Apple": null,
|
||||
"Microsoft": null,
|
||||
"Google": 'https://placehold.it/250x250'
|
||||
},
|
||||
limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
|
||||
onAutocomplete: function (val) {
|
||||
// Callback function when value is autcompleted.
|
||||
},
|
||||
minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
|
||||
});
|
||||
|
||||
$('.tap-target').tapTarget('open');
|
||||
$('.tap-target').tapTarget('close');
|
||||
Reference in New Issue
Block a user