mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
474 lines
12 KiB
TypeScript
474 lines
12 KiB
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;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|