declarations
Version:
[](https://www.npmjs.com/package/declarations)
479 lines (404 loc) • 12.7 kB
TypeScript
// Type definitions for materialize-css v0.97.5
// Project: http://materializecss.com/
// Definitions by: Erik Lieben <https://github.com/eriklieben>, Leon Yu <https://github.com/leonyu>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
/// <reference path="../jquery/jquery.d.ts" />
/// <reference path="../pickadate/pickadate.d.ts" />
declare namespace 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 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
*/
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|JQuery, 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;
/**
* Update all text field to reinitialize all the Materialize labels on the page if dynamically adding inputs
*/
updateTextFields(): void;
}
}
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.
* They allow you to hide content that is not immediately relevant to the user.
*
* @name options the collapsible options
*/
collapsible(options?: Materialize.CollapsibleOptions): JQuery;
/**
* 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): JQuery;
/**
* 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(): 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
*/
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): JQuery;
/**
* Open a modal programatically
*
* @name options the lean modal options
*/
openModal(options?: Materialize.LeanModalOptions): 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(): JQuery;
/**
* Pushpin is a fixed positioning plugin.
*
* @name options the push pin options
*/
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): JQuery;
/**
* 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): JQuery;
}