kylefang/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/zhigang1992/DefinitelyTyped.git synced 2026-04-24 05:06:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update MaterializeCSS to include Component

Browse Source
This commit is contained in:
Leon Yu
2016-02-15 19:36:51 -05:00
parent bda9391b49
commit a9b8a853e0
2 changed files with 163 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
materialize-css/materialize-css-tests.ts
View File

@@ -1,5 +1,33 @@
/// <reference path="materialize-css.d.ts" />
// Buttons
$('.fixed-action-btn').openFAB();
$('.fixed-action-btn').closeFAB();
// Forms - Select
$('select').material_select();
$('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
});
// Forms - Character Counter
$('input#input_text, textarea#textarea1').characterCounter();
// Navbar
$(".dropdown-button").dropdown();
$(".dropdown-button").dropdown({hover: false});
$(".button-collapse").sideNav();
// Collapsible
var collapseHtml = '<ul class="collapsible" data-collapsible="accordion">' +
'<li>' +
@@ -15,7 +43,7 @@ var collapseHtml = '<ul class="collapsible" data-collapsible="accordion">' +
'<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>' +
'</li>' +
'</ul>';
$(collapseHtml).collapsible({ accordion : false });
$(collapseHtml).collapsible({ accordion : true });
@@ -23,6 +51,8 @@ $(collapseHtml).collapsible({ accordion : true });
Materialize.toast('I am a toast!', 4000);
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);
// Dialogs - Tooltip
var tooltipHtml = '<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>';
@@ -35,11 +65,11 @@ var dropDownHtml = '<a class="dropdown-button btn" data-beloworigin="true" href=
$(dropDownHtml).dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false,
hover: true,
gutter: 0,
belowOrigin: false,
alignment: 'left'
constrain_width: false,
hover: true,
gutter: 0,
belowOrigin: false,
alignment: 'left'
});
$(dropDownHtml).dropdown({});
@@ -87,7 +117,21 @@ var sliderHtml = '<div class="slider">' +
$(sliderHtml).slider({ indicators: true, height: 5 });
$(sliderHtml).slider({ indicators: true, height: 5, transition: 4 });
$(sliderHtml).slider({ indicators: true, height: 5, transition: 4, interval: 5 });
// Carousel
$('.carousel').carousel();
$('.carousel').carousel({});
$('.carousel').carousel({ time_constant: 200, dist: -100, shift: 500, padding: 6000, full_width: 6000 });
// Next slide
$('.carousel').carousel('next');
$('.carousel').carousel('next', [3]); // Move next n times.
// Previous slide
$('.carousel').carousel('prev');
$('.carousel').carousel('prev', [4]); // Move prev n times.
// Modals
var modalhtml = '<div id="modal1" class="modal bottom-sheet">' +
'<div class="modal-content">' +
@@ -100,7 +144,7 @@ var modalhtml = '<div id="modal1" class="modal bottom-sheet">' +
'</div>';
$(modalhtml).openModal();
$(modalhtml).closeModal();
var modalTriggerHtml = '<button data-target="modal1" class="btn modal-trigger">Modal</button>';
$(modalTriggerHtml).leanModal();
$(modalTriggerHtml).leanModal({});
@@ -116,19 +160,19 @@ var parallaxHtml = '<div class="parallax-container">' +
'<div class="parallax"><img src="images/parallax1.jpg"></div>' +
'</div>';
$(parallaxHtml).parallax();
// PushPin
$('<div />').pushpin();
$('<div />').pushpin({ top: 1 });
$('<div />').pushpin({ top: 1, bottom: 1 });
$('<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")' },
];
Materialize.scrollFire(options);
Materialize.scrollFire(options);
// ScrollSpy
var scrollSpyHtml = '<div class="row">' +
@@ -188,8 +232,9 @@ var tabsHtml = '<div class="row">' +
'<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');
// Transitions
Materialize.showStaggeredList('#staggered-test');

117
materialize-css/materialize-css.d.ts vendored
View File

@@ -1,9 +1,10 @@
// Type definitions for materialize-css
// Type definitions for materialize-css v0.97.5
// Project: http://materializecss.com/
// Definitions by: Erik Lieben <https://github.com/eriklieben>
// Definitions by: Erik Lieben <https://github.com/eriklieben>, Leon Yu <https://github.com/leonyu>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
/// <reference path="../jquery/jquery.d.ts" />
/// <reference path="../pickadate/pickadate.d.ts" />
declare module Materialize {
@@ -102,6 +103,41 @@ declare module Materialize {
interval?: number;
}
/**
* The carousel options
*/
interface CarouselOptions {
/**
* Transition time.
* Default: 200
*/
time_constant?: number;
/**
* Perspective zoom. If 0, all items are the same size.
* Default: -100
*/
dist?: number;
/**
* Set the duration of the transition animation in ms.
* Default: 500
*/
shift?: number;
/**
* Set the duration between transitions in ms.
* Default: 6000
*/
padding?: number;
/**
* Set the duration between transitions in ms.
* Default: 6000
*/
full_width?: number;
}
/**
* The lean modal options
*/
@@ -261,7 +297,7 @@ declare module Materialize {
* @name className The className to use to format the message to display
* @name completeCallback Callback function to call when the messages completes/hides.
*/
toast(message:string, displayLength:number, className?:string, completeCallback?:Function): void;
toast(message:string|JQuery, displayLength:number, className?:string, completeCallback?:Function): void;
/**
* Fires an event when the page is scrolled to a certain area
@@ -289,6 +325,34 @@ declare module Materialize {
declare var Materialize : Materialize.Materialize;
interface JQuery {
/**
* open Fixed Action Button
*/
openFAB(): void;
/**
* close Fixed Action Button
*/
closeFAB(): void;
/**
* Select allows user input through specified options.
* Initialization
*/
material_select(): void;
/**
* Select allows user input through specified options.
* Updating/Destroying Select
*
* @name method "destroy" destroy the material select
*/
material_select(method: string): void;
/**
* Use a character counter in fields where a character restriction is in place.
*/
characterCounter(): JQuery;
/**
* Collapsibles are accordion elements that expand when clicked on.
@@ -296,7 +360,7 @@ interface JQuery {
*
* @name options the collapsible options
*/
collapsible(options?: Materialize.CollapsibleOptions): void;
collapsible(options?: Materialize.CollapsibleOptions): JQuery;
/**
* Tooltips are small, interactive, textual hints for mainly graphical elements.
@@ -304,7 +368,7 @@ interface JQuery {
*
* @name options the tooltip options or the string "remove" to remove the tooltip function
*/
tooltip(options?: Materialize.TooltipOptions|string): void;
tooltip(options?: Materialize.TooltipOptions|string): JQuery;
/**
* Add a dropdown list to any button.
@@ -317,23 +381,50 @@ interface JQuery {
/**
* Material box is a material design implementation of the Lightbox plugin.
*/
materialbox(): void;
materialbox(): JQuery;
/**
* slider is a simple and elegant image carousel.
* You can also have captions that will be transitioned on their own depending on their alignment.
* You can also have indicators that show up on the bottom of the slider.
*
* @name options the slider options
*/
slider(options?: Materialize.SliderOptions): JQuery;
/**
* slider is a simple and elegant image carousel.
* You can also have captions that will be transitioned on their own depending on their alignment.
* You can also have indicators that show up on the bottom of the slider.
*
* @name method the string "start" to start the animation or "pauze" to pauze the animation
*/
slider(method: string): JQuery;
/**
* Our slider is a simple and elegant image carousel.
* You can also have captions that will be transitioned on their own depending on their alignment.
* You can also have indicators that show up on the bottom of the slider.
*
* @name options the slider options or the string "start" to start the animation or "pauze" to pauze the animation
*/
slider(options?: Materialize.SliderOptions|string): void;
carousel(options?: Materialize.CarouselOptions): JQuery;
/**
* Our slider is a simple and elegant image carousel.
* You can also have captions that will be transitioned on their own depending on their alignment.
* You can also have indicators that show up on the bottom of the slider.
*
* @name method the methods to pause, start, move to next and move to previous slide.
*/
carousel(method: string, count: [number]): JQuery;
/**
* Modal for dialog boxes, confirmation messages, or other content that can be called up.
*
* @name options the lean modal options
*/
leanModal(options?: Materialize.LeanModalOptions): void;
leanModal(options?: Materialize.LeanModalOptions): JQuery;
/**
* Open a modal programatically
@@ -348,21 +439,21 @@ interface JQuery {
/**
* Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.
*/
parallax(): void;
parallax(): JQuery;
/**
* Pushpin is a fixed positioning plugin.
*
* @name options the push pin options
*/
pushpin(options?: Materialize.PushpinOptions): void;
pushpin(options?: Materialize.PushpinOptions): JQuery;
/**
* Scrollspy is a jQuery plugin that tracks certain elements and which element the user's screen is currently centered on.
*
* @name options the scroll spy options
*/
scrollSpy(options?: Materialize.ScrollSpyOptions): void;
scrollSpy(options?: Materialize.ScrollSpyOptions): JQuery;
/**
* A slide out menu. You can add a dropdown to your sidebar by using our collapsible component.
@@ -376,5 +467,5 @@ interface JQuery {
*
* @name method, the method to call (always "select_tab") and a param containing the id of the tab to open
*/
tabs(method?:string, tab?:string): void;
}
tabs(method?:string, tab?:string): JQuery;
}