mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-08-27 11:40:08 +08:00
Merge pull request #8091 from eriklieben/add-materialize-css
Added materialize-css definition
This commit is contained in:
Masahiro Wakame
@@ -0,0 +1,195 @@
|
||||
/// <reference path="materialize-css.d.ts" />
|
||||
|
||||
// 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>';
|
||||
|
||||
$(collapseHtml).collapsible({ accordion : false });
|
||||
$(collapseHtml).collapsible({ accordion : true });
|
||||
|
||||
// Dialogs - Toasts
|
||||
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'));
|
||||
|
||||
// Dialogs - Tooltip
|
||||
var tooltipHtml = '<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>';
|
||||
$(tooltipHtml).tooltip();
|
||||
$(tooltipHtml).tooltip({delay: 100});
|
||||
$(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,
|
||||
constrain_width: false,
|
||||
hover: true,
|
||||
gutter: 0,
|
||||
belowOrigin: false,
|
||||
alignment: 'left'
|
||||
});
|
||||
$(dropDownHtml).dropdown({});
|
||||
|
||||
// Media - materialbox
|
||||
var materialboxHtml = '<img class="materialboxed" width="650" src="images/sample-1.jpg">';
|
||||
$(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>';
|
||||
|
||||
$(sliderHtml).slider();
|
||||
$(sliderHtml).slider({});
|
||||
$(sliderHtml).slider({ indicators: true });
|
||||
$(sliderHtml).slider({ indicators: true, height: 5 });
|
||||
$(sliderHtml).slider({ indicators: true, height: 5, transition: 4 });
|
||||
$(sliderHtml).slider({ indicators: true, height: 5, transition: 4, interval: 5 });
|
||||
|
||||
// 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>';
|
||||
$(modalhtml).openModal();
|
||||
$(modalhtml).closeModal();
|
||||
|
||||
var modalTriggerHtml = '<button data-target="modal1" class="btn modal-trigger">Modal</button>';
|
||||
$(modalTriggerHtml).leanModal();
|
||||
$(modalTriggerHtml).leanModal({});
|
||||
$(modalTriggerHtml).leanModal({ dismissible: true });
|
||||
$(modalTriggerHtml).leanModal({ dismissible: true, opacity: 1 });
|
||||
$(modalTriggerHtml).leanModal({ dismissible: true, opacity: 1, in_duration: 100 });
|
||||
$(modalTriggerHtml).leanModal({ dismissible: true, opacity: 1, in_duration: 100, out_duration: 100 });
|
||||
$(modalTriggerHtml).leanModal({ dismissible: true, opacity: 1, in_duration: 100, out_duration: 100, ready: () => console.log('ready') });
|
||||
$(modalTriggerHtml).leanModal({ dismissible: true, opacity: 1, in_duration: 100, out_duration: 100, ready: () => console.log('ready'), complete: () => console.log('complete')});
|
||||
|
||||
// Parallax
|
||||
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);
|
||||
|
||||
// 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();
|
||||
|
||||
// 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>';
|
||||
$(sideNavHtml).sideNav();
|
||||
$(sideNavHtml).sideNav({});
|
||||
$(sideNavHtml).sideNav({ menuWidth: 100 });
|
||||
$(sideNavHtml).sideNav({ menuWidth: 100, edge: 'right' });
|
||||
$(sideNavHtml).sideNav({ menuWidth: 100, edge: 'right', closeOnClick: true });
|
||||
$(sideNavHtml).sideNav("show");
|
||||
$(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>';
|
||||
|
||||
$(tabsHtml).tabs();
|
||||
$(tabsHtml).tabs('select_tab', 'test1');
|
||||
|
||||
|
||||
Vendored
+380
@@ -0,0 +1,380 @@
|
||||
// Type definitions for materialize-css
|
||||
// Project: http://materializecss.com/
|
||||
// Definitions by: Erik Lieben <https://github.com/eriklieben>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
/// <reference path="../jquery/jquery.d.ts" />
|
||||
|
||||
declare module Materialize {
|
||||
|
||||
/**
|
||||
* The collapsible options
|
||||
*/
|
||||
interface CollapsibleOptions {
|
||||
/**
|
||||
* A setting that changes the collapsible behavior to expandable instead of the default accordion style
|
||||
*/
|
||||
accordion: boolean;
|
||||
}
|
||||
|
||||
interface TooltipOptions {
|
||||
/**
|
||||
* The delay before the tooltip shows (in milliseconds)
|
||||
*/
|
||||
delay:number;
|
||||
}
|
||||
|
||||
/**
|
||||
* The dropdown options
|
||||
*/
|
||||
interface DropDownOptions {
|
||||
|
||||
/**
|
||||
* The duration of the transition enter in milliseconds.
|
||||
* Default: 300
|
||||
*/
|
||||
inDuration?:number;
|
||||
|
||||
/**
|
||||
* The duration of the transition out in milliseconds.
|
||||
* Default: 225
|
||||
*/
|
||||
outDuration?:number;
|
||||
|
||||
// TODO: constrain_width
|
||||
/**
|
||||
* If true, constrainWidth to the size of the dropdown activator.
|
||||
* Default: true
|
||||
*/
|
||||
constrain_width?:boolean;
|
||||
/**
|
||||
* If true, the dropdown will open on hover.
|
||||
* Default: false
|
||||
*/
|
||||
hover?:boolean;
|
||||
|
||||
/**
|
||||
* This defines the spacing from the aligned edge.
|
||||
* Default: 0
|
||||
*/
|
||||
gutter?:number;
|
||||
|
||||
/**
|
||||
* If true, the dropdown will show below the activator.
|
||||
* Default: false
|
||||
*/
|
||||
belowOrigin?:boolean;
|
||||
|
||||
/**
|
||||
* Defines the edge the menu is aligned to.
|
||||
* Default: 'left'
|
||||
*/
|
||||
alignment?:string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The slider options
|
||||
*/
|
||||
interface SliderOptions {
|
||||
|
||||
/**
|
||||
* Set to false to hide slide indicators.
|
||||
* Default: true
|
||||
*/
|
||||
indicators?: boolean;
|
||||
|
||||
/**
|
||||
* Set height of slider.
|
||||
* Default: 400
|
||||
*/
|
||||
height?: number;
|
||||
|
||||
/**
|
||||
* Set the duration of the transition animation in ms.
|
||||
* Default: 500
|
||||
*/
|
||||
transition?: number;
|
||||
|
||||
/**
|
||||
* Set the duration between transitions in ms.
|
||||
* Default: 6000
|
||||
*/
|
||||
interval?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* The lean modal options
|
||||
*/
|
||||
interface LeanModalOptions {
|
||||
|
||||
/**
|
||||
* Modal can be dismissed by clicking outside of the modal.
|
||||
* Default: true
|
||||
*/
|
||||
dismissible?: boolean;
|
||||
|
||||
/**
|
||||
* Opacity of modal background.
|
||||
* Default. .5
|
||||
*/
|
||||
opacity?: number;
|
||||
|
||||
/**
|
||||
* Transition in duration.
|
||||
* Default: 300
|
||||
*/
|
||||
in_duration?: number;
|
||||
|
||||
/**
|
||||
* Transition out duration.
|
||||
* Default: 200
|
||||
*/
|
||||
out_duration?: number;
|
||||
|
||||
/**
|
||||
* Callback for Modal open.
|
||||
* Default: function() { alert('Ready'); }
|
||||
*/
|
||||
ready?: Function;
|
||||
|
||||
/**
|
||||
* Callback for Modal close.
|
||||
* Default: function() { alert('Closed'); }
|
||||
*/
|
||||
complete?: Function;
|
||||
}
|
||||
|
||||
/**
|
||||
* The push pin options
|
||||
*/
|
||||
interface PushpinOptions {
|
||||
|
||||
/**
|
||||
* The distance in pixels from the top of the page where the element becomes fixed.
|
||||
* Default: 0
|
||||
*/
|
||||
top?:number;
|
||||
|
||||
/**
|
||||
* The distance in pixels from the top of the page where the elements stops being fixed.
|
||||
* Default: Infinity
|
||||
*/
|
||||
bottom?:number;
|
||||
|
||||
/**
|
||||
* The offset from the top the element will be fixed at.
|
||||
* Default: 0
|
||||
*/
|
||||
offset?:number;
|
||||
}
|
||||
|
||||
/**
|
||||
* The scroll spy options
|
||||
*/
|
||||
interface ScrollSpyOptions {
|
||||
|
||||
/**
|
||||
* Throttling in miliseconds.
|
||||
* Default: 100
|
||||
*/
|
||||
throttle?: number;
|
||||
|
||||
/**
|
||||
* Offset from top.
|
||||
* Default: 0
|
||||
*/
|
||||
offsetTop?: number;
|
||||
|
||||
/**
|
||||
* Offset from right.
|
||||
* Default: 0
|
||||
*/
|
||||
offsetRight?: number;
|
||||
|
||||
/**
|
||||
* Offset from bottom.
|
||||
* Default: 0
|
||||
*/
|
||||
offsetBottom?: number;
|
||||
|
||||
/**
|
||||
* Offset from left.
|
||||
* Default: 0
|
||||
*/
|
||||
offsetLeft?: number;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* The slideNav options
|
||||
*/
|
||||
interface SideNavOptions {
|
||||
/**
|
||||
* Default: 240
|
||||
*/
|
||||
menuWidth?: number;
|
||||
|
||||
/**
|
||||
* The horizontal origin
|
||||
* Default: ' left'
|
||||
*/
|
||||
edge?: string;
|
||||
|
||||
/**
|
||||
* Closes side-nav on <a> clicks, useful for Angular/Meteor
|
||||
* Default: false
|
||||
*/
|
||||
closeOnClick?: boolean;
|
||||
}
|
||||
|
||||
interface ScrollFireOptions {
|
||||
|
||||
/**
|
||||
* The selector for the element that is being tracked.
|
||||
*/
|
||||
selector?: string;
|
||||
|
||||
/**
|
||||
* Offset to use when activating the scroll fire event
|
||||
* If this is 0, the callback will be fired when the selector element is at the very bottom of the user's window.
|
||||
*/
|
||||
offset?: number;
|
||||
|
||||
/**
|
||||
* The string function call that you want to make when the user scrolls to the threshold.
|
||||
* It will only be called once.
|
||||
* Example: 'console.log("hello, world!")';
|
||||
*/
|
||||
callback?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The Materialize object
|
||||
*/
|
||||
interface Materialize {
|
||||
|
||||
/**
|
||||
* Displays a toast message on screen
|
||||
*
|
||||
* @name message The message to display on screen
|
||||
* @name displayLength The duration in milliseconds to display the message on screen
|
||||
* @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;
|
||||
|
||||
/**
|
||||
* Fires an event when the page is scrolled to a certain area
|
||||
*
|
||||
* @name options optional parameter with scroll fire options
|
||||
*/
|
||||
scrollFire(options?:ScrollFireOptions): void;
|
||||
|
||||
/**
|
||||
* A staggered reveal effect for any UL Tag with list items
|
||||
*
|
||||
* @name selector the selector for the list to show in staggered fasion
|
||||
*/
|
||||
showStaggeredList(selector:string): void;
|
||||
|
||||
/**
|
||||
* Fade in images. It also animates grayscale and brightness to give it a unique effect.
|
||||
*
|
||||
* @name selector the selector for the image to fade in
|
||||
*/
|
||||
fadeInImage(selector:string): void;
|
||||
}
|
||||
}
|
||||
|
||||
declare var Materialize : Materialize.Materialize;
|
||||
|
||||
interface JQuery {
|
||||
|
||||
/**
|
||||
* Collapsibles are accordion elements that expand when clicked on.
|
||||
* They allow you to hide content that is not immediately relevant to the user.
|
||||
*
|
||||
* @name options the collapsible options
|
||||
*/
|
||||
collapsible(options?: Materialize.CollapsibleOptions): void;
|
||||
|
||||
/**
|
||||
* Tooltips are small, interactive, textual hints for mainly graphical elements.
|
||||
* When using icons for actions you can use a tooltip to give people clarification on its function.
|
||||
*
|
||||
* @name options the tooltip options or the string "remove" to remove the tooltip function
|
||||
*/
|
||||
tooltip(options?: Materialize.TooltipOptions|string): void;
|
||||
|
||||
/**
|
||||
* Add a dropdown list to any button.
|
||||
* Make sure that the data-activates attribute matches the id in the <ul> tag.
|
||||
*
|
||||
* @name options the drop down options
|
||||
*/
|
||||
dropdown(options?: Materialize.DropDownOptions): void;
|
||||
|
||||
/**
|
||||
* Material box is a material design implementation of the Lightbox plugin.
|
||||
*/
|
||||
materialbox(): void;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
/**
|
||||
* Open a modal programatically
|
||||
*/
|
||||
openModal(): void;
|
||||
|
||||
/**
|
||||
* Close a modal programatically
|
||||
*/
|
||||
closeModal(): void;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
/**
|
||||
* Pushpin is a fixed positioning plugin.
|
||||
*
|
||||
* @name options the push pin options
|
||||
*/
|
||||
pushpin(options?: Materialize.PushpinOptions): void;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
/**
|
||||
* A slide out menu. You can add a dropdown to your sidebar by using our collapsible component.
|
||||
*
|
||||
* @params methodOrOptions the slide navigation options or a string with "show" to reveal or "hide" to hide the menu
|
||||
*/
|
||||
sideNav(methodOrOptions?: Materialize.SideNavOptions|string): void;
|
||||
|
||||
/**
|
||||
* Programmatically trigger the tab change event
|
||||
*
|
||||
* @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;
|
||||
}
|
||||
Reference in New Issue
Block a user