// Type definitions for uikit 2.23.0 // Project: http://getuikit.org // Definitions by: Giovanni Silva // Definitions: https://github.com/borisyankov/DefinitelyTyped /// declare module UIkit { interface ModalElement { /** * Show the modal */ show(): void /** * Hide the modal */ hide(): void /** * Return if the modal is active on the page * @return {boolean} True if the modal is current active on the page, false otherwise */ isActive(): boolean } /** * Create modal dialogs with different styles and transitions * Documentation: {@link http://getuikit.org/docs/modal.html} * *

Events

* * * * * * * * * * * * * * * * * *
NameParameterDescription
show.uk.modaleventOn modal show
hide.uk.modaleventOn modal hide
* @example * 

     * $('.modalSelector').on({
	 *
	 *	'show.uk.modal': function(){
	 *    console.log("Modal is visible.");
	 *	},
	 *
	 *   'hide.uk.modal': function(){
	 *    console.log("Element is not visible.");
	 *  }
	 *	});
     *
*/ interface Modal { /** * Create a alert dialog * @param {string} message The message to display. Can be Html */ alert(message:string): void /** * Create a confirm dialog and execute the function on positive confirmation * @param {string} message The message to display. Can be Html * @param {function} fn A function to execute on confirmation */ confirm(message:string, fn:() => any): void /** * Create a prompt dialog, where the user enter information * @param {string} message The message to display. Can be Html * @param {function} fn A function to execute on confirmation. The function * receive the new value as a parameter */ prompt(message:string, fn:(newValue:string) => any): void /** * Create a prompt dialog, where the user enter information * @param {string} message The message to display. Can be Html * @param {string} value A value to init the input * @param {function} fn A function to execute on confirmation. The function * receive the new value as a parameter */ prompt(message:string, value:string, fn:(newValue:string) => any): void /** * Create a modal that blocks the entire page * @param {string} content A content to display. Can be Html */ blockUI(content:string): ModalElement /** * Select a modal element on page and return it. * @example * 

         * var modal = UIkit.modal(".modalSelector");
         *
         * if ( modal.isActive() ) {
	     *   modal.hide();
	     *   } else {
	     *   modal.show();
	     * }
         *
*/ (selector:string|JQuery): ModalElement } /** * Create a smooth off-canvas sidebar that slides in and out of the page * Documentation: {@link http://getuikit.org/docs/offcanvas.html} *

Events:

* * * * * * * * * * * * * * * * *
NameParameterDescription
show.uk.offcanvasevent, panel, barOn offcanvas show
hide.uk.offcanvasevent, panel, barOn offcanvas hide
*/ interface OffCanvas { /** * Show an off-canvas matching the passed CSS selector * @param {string} selector A CSS selector */ show(selector:string): void /** * Hide any active offcanvas. Set force to true, if you don't want any * animation * @param {boolean} force When seted to true do not run animations. * @default false */ hide(force?:boolean): void } interface LightBoxOptions { /** * Group name to group elements as a gallery to show. * @default false */ group?: string /** * Animation duration between gallery item change * @default 400 */ duration?: number /** * Allow keyboard navigation * @default true */ keyboard?: boolean } interface LightBoxItem { source: string type: string } interface LightBoxElement { /** * Open the lightbox */ show(): void } /** * Create a fancy lightbox for images and videos utilizing the @see {@link modal|Modal Component} * Documentation {@link http://getuikit.org/docs/lightbox.html} *

Events:

* * * * * * * * * * * *
NameParameterDescription
showitem.uk.lightboxevent, dataOn lightbox show
*/ interface LightBox { /** * Create dynamic lightbox * @param {Array} items Group of items on the lightbox * @return {LightBoxElement} The lightbox element to show */ create(items:Array): LightBoxElement /** * Init element manually */ (element:string|JQuery, options?:LightBoxOptions): LightBoxElement } type CallbackAutoComplete = () => string interface AutoCompleteOptions { /** * Data source * @default [] */ source?: string|string[]|CallbackAutoComplete /** * Min. input length before triggering autocomplete * @default 3 */ minLength?: number /** * Query name when sending ajax request * @default search */ param?: string /** * Delay time after stop typing * @default 300 */ delay?: number } /** * Create inputs that allow users to choose from a list of pre-generated values while typing * Documentation {@link http://getuikit.org/docs/autocomplete.html} *

Events

* * * * * * * * * * * * * * * * *
NameParameterDescription
selectitem.uk.autocompleteevent, data, acobjectOn item selected
show.uk.autocompleteeventOn autocomplete dropdown show
*/ interface AutoComplete { /** * Init element manually * @param element * @param options */ (element:string|JQuery, options?:AutoCompleteOptions): any } interface DatePickerOptions { /** * Start of the week * integer (0..6) * @default 1 */ weekstart?: number /** * Language string definitions * @default { months:['January',...], weekdays:['Sun',..,'Sat'] } */ i18n?: {} /** * Date format string * @default 'DD.MM.YYYY' */ format?: string /** * Offset to the input value * @default 5 */ offsettop?: number /** * Min. date * bool (false to ignore the option) * string (date as in format) * integer (offset in days from current date) * @default false */ minDate?: string|boolean|number /** * Max. date * bool (false to ignore the option) * string (date as in format) * integer (offset in days from current date) * @default false */ maxDate?: string|boolean|number /** * Position of the datepicker * 'auto', 'top', 'bottom' * @default 'auto' */ pos?: string } /** * Create a toggleable dropdown with an datepicker * Documentation {@link http://getuikit.org/docs/datepicker.html} *

Events

* * * * * * * * * * * * * * * * * * * * * *
NameParameterDescription
show.uk.datepickereventOn datepicker dropdown show
hide.uk.datepickereventOn datepicker dropdown hide
update.uk.datepickereventOn calendar rendering
*/ interface DatePicker { /** * Init element manually * @param element * @param options */ (element:string|JQuery, options?:DatePickerOptions): any } interface HtmlEditorOptions { /** * View mode * Possible values 'split','tab' * @default 'split' */ mode?: string /** * Button list to appear in the toolbar * @default [ "bold", "italic", "strike", "link", "picture", ... ] */ toolbar?: string[] /** * Min. browser width when to switch to responsive tab mode when in split mode * @default 1000 */ maxsplitsize?: number /** * Label string for preview mode * @default 'Preview' */ lblPreview?: string /** * Label string for code mode * @default 'Markdown' */ lblCodeview?: string } /** * Create a rich HTML or markdown editor with an immediate preview and syntax highlighting * Documentation {@link http://getuikit.org/docs/htmleditor.html} */ interface HtmlEditor { /** * Init element manually * @param element * @param options */ (element: string|JQuery, options?: HtmlEditorOptions): any } interface SliderOptions { /** * Center items mode * @default false */ center?: boolean /** * Mouse movement threshold in pixel until trigger element dragging * @default true */ threshold?: boolean /** * Infinite scrolling * @default true */ infinite?: boolean /** * Class added on active item in center mode * @default uk-active */ activecls?: string /** * Defines whether or not the slider items should switch automatically * @default false */ autoplay?: boolean /** * Pause autoplay when hovering a slider * @default true */ pauseOnHover?: boolean /** * Defines the timespan between switching slider items * @default 7000 */ autoplayInterval?: number } /** * Create a list of items to use as a responsive carousel slider * Documentation {@link http://getuikit.org/docs/slider.html} *

Events

* * * * * * * * * * * *
NameParameterDescription
focusitem.uk.sliderevent, index, itemOn item focus
*/ interface Slider { /** * Init element manually * @param element * @param options */ (element:string|JQuery, options?:SliderOptions): any } interface SlideSetOptions { /** * Default visible items in a set * @default 1 */ default?: number /** * Visible items in a set at small breakpoint * @default null */ small?: number /** * Visible items in a set at medium breakpoint * @default null */ medium?: number /** * Visible items in a set at large breakpoint * @default null */ large?: number /** * Visible items in a set at xlarge breakpoint * @default null */ xlarge?: number /** * Animation name * @default 'fade' */ animation?: string /** * Animation duration in ms * @default 200 */ duration?: number /** * Animation delay between items in a set * @default 100 */ delay?: number /** * Items filter * @default "" */ filter?: string /** * Defines whether or not the slideset items should switch automatically. * @default false */ autoplay?: boolean /** * Pause autoplay when hovering a slideset. * @default true */ pauseOnHover?: boolean /** * Defines the timespan between switching slideset items. * @default 7000 */ autoplayInterval?: number } /** * Create sets and groups of items, allowing to loop through the sets. * Documentation {@link http://getuikit.org/docs/slideset.html} *

Events

* * * * * * * * * * * *
NameParameterDescription
show.uk.slidesetevent, setOn set show
*/ interface SlideSet { /** * Init element manually * @param element * @param options */ (element:string|JQuery, options?:SlideSetOptions): any } interface SlideShowOptions { /** * Defines the preferred transition between items. * @default 'fade */ animation?: string /** * Defines the transition duration. * @default 500 */ duration?: number /** * Defines the slideshow height. * @default 'auto' */ height?: string /** * Defines the first slideshow item to be displayed. * @default 0 */ start?: number /** * Defines whether or not the slideshow items should switch automatically. * @default false */ autoplay?: boolean /** * Pause autoplay when hovering a slideshow. * @default true */ pauseOnHover?: boolean /** * Defines the timespan between switching slideshow items. * @default 7000 */ autoplayInterval?: number /** * Defines whether or not a video starts automatically. * @default true */ videoautoplay?: boolean /** * Defines whether or not a video is muted. * @default false */ videomute?: boolean /** * Defines whether or not the Ken Burns effect is active. If kenburns is a numeric value, it will be used as * the animation duration. * @default false */ kenburns?: boolean /** * Animation series. * @default 'uk-animation-middle-left, uk-animation-top-right, uk-animation-bottom-left, uk-animation-top-center,uk-animation-bottom-right' */ kenburnsanimations?: string /** * Defines the number of slices, if a "Slice" transition is set. * @default 15 */ slices?: number } /** * Create a responsive image or video slideshow with stunning transition effects, fullscreen mode and overlays. * Documentation {@link http://getuikit.org/docs/slideshow.html} *

Events

* * * * * * * * * * * *
NameParameterDescription
show.uk.slideshowevent, next slideOn showing a new slide (after animation is finished)
*/ interface SlideShow { /** * Init element manually * @param element * @param options */ (element:string|JQuery, options:SlideShowOptions): any } interface ParallaxOptions { /** * Animation velocity during scrolling * @default 0.5 */ velocity?: number /** * Element dimension reference for animation duration. * @default false */ target?: boolean /** * Animation range depending on the viewport. *

Possible value

* float (0 to 1) * @default false */ viewport?: number /** * Condition for the active status with a width as integer (e.g. 640) or a css media query * @default false *

Possible Value

* integer / string */ media?: number|string } /** * Animate CSS properties depending on the scroll position of the document. * Documentation {@link http://getuikit.org/docs/parallax.html} */ interface Parallax { /** * Init element manually * @param element * @param options */ (element:string|JQuery, options:ParallaxOptions): any } interface AccordionOptions { /** * Show first item on init * @default true *

Possible value

* boolean */ showfirst?: boolean /** * Allow multiple open items * @default true *

Possible value

* boolean */ collapse?: boolean /** * Animate toggle * @default true *

Possible value

* boolean */ animate?: boolean /** * Animation function * @default swing *

Possible value

* string */ easing?: string /** * Animation duration * @default 300 *

Possible value

* integer */ duration?: number /** * Css selector for toggles * @default .uk-accordion-title *

Possible value

* string */ toggle?: string /** * Css selector for content containers * @default .uk-accordion-content *

Possible value

* string */ containers?: string /** * Class to add when an item is active * @default uk-active *

Possible value

* string */ clsactive?: string } /** * Create a list of items, allowing each item's content to be expanded and collapsed by clicking its header. * Documentation {@link http://getuikit.org/docs/accordion.html} *

Events

* * * * * * * * * * * *
NameParameterDescription
toggle.uk.accordionevent, active, toggle, contentOn item toggle
*/ interface Accordion { /** * Init element manually * @param element * @param options */ (element:string|JQuery, options:AccordionOptions): any } interface NotifyOptions { /** * The message to display */ message?: string /** * A notification can be styled by adding a status to the message to indicate an info, success, warning or a * danger status. *

Possible values

* info, sucess, warning, danger * If you want to create one set its style with the CSS class uk-notify-message-yourStatus * @default 'info' */ status?: string /** * Amount of tiem in milliseconds a messa is visible. Set to 0 for sticky message * @default 5000 */ timeout?: number /** * Adjust the notification's position to different corners. * @default 'top-center' *

Possible values

* top-center, top-left, top-right, bottom-center, bottom-left, bottom-right * If you want to create one value set its style with the CSS uk-notify-yourPosition */ pos?: string } /** * Create toggleable notifications that fade out automatically * Documentation {@link http://getuikit.org/docs/notify.html} */ interface Notify { /** * Show a message with default options * @param message The html message */ (message:string): any /** * Show a message with a different status * @param message The html message * @param status The string status */ (message:string, status:string): any /** * Show a message with diferente options * @param message The html message * @param options Options */ (message:string, options:NotifyOptions): any /** * Show a message with diferent options * @param options Options */ (options:NotifyOptions): any } interface SearchOptions { /** * Data source url * @default '' *

Possible value

* string */ source?: string /** * Min. input length before triggering autocomplete * @default 3 *

Possible value

* integer */ minLength?: number /** * Query name when sending ajax request * @default search *

Possible value

* string */ param?: string /** * Delay time after stop typing * @default 300 *

Possible value

* integer */ delay?: number } /** * Easily create a nicely looking search. * Documentation {@link http://getuikit.org/docs/search.html} */ interface Search { /** * Init element manually * @param element * @param options */ (element:string|JQuery, options:SearchOptions): any } interface NestableOptions { /** * List group * @default false *

Possible value

* string */ group?: string /** * Max nesting level * @default 10 *

Possible value

* integer */ maxDepth?: number /** * Pixel threshold before starting to drag * @default 20 *

Possible value

* integer */ threshold?: number /** * List node name * @default ul *

Possible value

* string */ listNodeName?: string /** * Item node name * @default li *

Possible value

* string */ itemNodeName?: string /** * List base class * @default uk-nestable *

Possible value

* string */ listBaseClass?: string /** * List class * @default uk-nestable-list *

Possible value

* string */ listClass?: string /** * List item class * @default uk-nestable-list-item *

Possible value

* string */ listitemClass?: string /** * Item class * @default uk-nestable-item *

Possible value

* string */ itemClass?: string /** * Class added to dragged list * @default uk-nestable-list-dragged *

Possible value

* string */ dragClass?: string /** * Class added to <html> when moving * @default uk-nestable-moving *

Possible value

* string */ movingClass?: string /** * Class for drag handle * @default uk-nestable-handle *

Possible value

* string */ handleClass?: string /** * Class for collapsed items * @default uk-nestable-collapsed *

Possible value

* string */ collapsedClass?: string /** * Class for placeholder of currently dragged element * @default uk-nestable-placeholder *

Possible value

* string */ placeClass?: string /** * Elements with this class will not trigger dragging. Useful when having the complete item draggable and not * just the handle. * @default uk-nestable-nodrag *

Possible value

* string */ noDragClass?: string /** * Class for empty lists * @default uk-nestable-empty *

Possible value

* string */ emptyClass?: string } /** * Create nestable lists that can be sorted by drag and drop. * Documentation {@link http://getuikit.org/docs/nestable.html} *

Events

* * * * * * * * * * * * * * * * * * * * * * * * * * *
NameParameterDescription
start.uk.nestableevent, nestable objectOn nestable drag start
move.uk.nestableevent, nestable objectOn nestable move item
stop.uk.nestableevent, nestable objectOn nestable stop dragging
change.uk.nestableevent, sortable object, dragged element, actionOn nestable change item
*/ interface Nestable { /** * Init element manually * @param element * @param options */ (element:string|JQuery, options:NestableOptions): any } interface SortableOptions { /** * List group * @default false *

Possible value

* string */ group?: string /** * Animation speed in ms * @default 150 *

Possible value

* integer */ animation?: string /** * Mouse movement threshold in pixel until trigger element dragging * @default 10 *

Possible value

* integer */ threshold?: string /** * Custom class to define elements which can trigger sorting * @default '' *

Possible value

* string */ handleClass?: string /** * Custom class added to the dragged element * @default '' *

Possible value

* string */ dragCustomClass?: string } /** * Create sortable grids and lists to rearrange the order of its elements. * Documentation {@link http://getuikit.org/docs/sortable.html} *

Events

* * * * * * * * * * * * * * * * * * * * * * * * * * *
NameParameterDescription
start.uk.sortableevent, sortable object, dragged elementOn sortable drag start
move.uk.sortableevent, sortable objectOn sortable move item
stop.uk.sortableevent, sortable object, dragged elementOn sortable stop dragging
change.uk.sortableevent, sortable object, dragged element, actionOn sortable change item
*/ interface Sortable { /** * Init element manually * @param element * @param options */ (element:string|JQuery, options:SortableOptions): any } interface StickyOptions { /** * Top offset whent sticky should be triggered * @default 0 *

Possible value

* integer */ top?: number /** * UIkit animation class * @default '' *

Possible value

* string */ animation?: string /** * Init class when the element is sticky for the first time * @default uk-sticky-init *

Possible value

* string */ clsinit?: string /** * Active class to add, when element is sticky * @default uk-active *

Possible value

* string */ clsactive?: string /** * Class to add, when element is not sticky * @default '' *

Possible value

* string */ clsinactive?: string /** * Css selector where to get the width from in sticky mode. By default it takes the width from the created wrapper element. * @default '' *

Possible value

* string */ getWidthFrom?: string /** * Condition for the active status with a width as integer (e.g. 640) or a css media query * @default false *

Possible value

* integer / string */ media?: number|string /** * Make sure that a sticky element is not over a targeted element via location hash on dom-ready. * @default false *

Possible value

* boolean */ target?: boolean /** * Show sticky element only when scrolling up. * @default false *

Possible value

* boolean */ showup?: boolean /** * Set to true to bind sticky to the parent or a Css selector to bind sticky to a specific element. * @default false *

Possible value

* mixed */ boundary?: boolean|string } /** * Make elements remain at the top of the viewport, like a sticky navbar. * Documentation {@link http://getuikit.org/docs/sticky.html} *

Events

* * * * * * * * * * * * * * * * *
NameParameterDescription
active.uk.stickyeventElement getting sticky
inactive.uk.stickyeventElement leaving sticky mode
*/ interface Sticky { /** * Init the element manually * @param element * @param options */ (element:string|JQuery, options:StickyOptions): any } interface TimepickerOptions { /** * Defines the preferred time notation * @default '24h' *

Possible value

* '24h' or '12h' */ format?: string /** * Start time * @default 0 *

Possible value

* Integer between 0 and 24 */ start?: number /** * End time * @default 24 *

Possible value

* Integer between 0 and 24 */ end?: number } /** * Create a timepicker which can easily be used by selecting a time value from a pre filled dropdown. * Documentation {@link http://getuikit.org/docs/timepicker.html} */ interface Timepicker { /** * Init element manually * @param element * @param options */ (element:string|JQuery, options:TimepickerOptions): any } interface TooltipOptions { /** * Offset to the source element * @default 5 *

Possible value

* integer */ offset?: number /** * Tooltip position * @default 'top' *

Possible value

* string */ pos?: string /** * Fade in tooltip * @default false *

Possible value

* boolean */ animation?: boolean /** * Delay tooltip show in ms * @default 0 *

Possible value

* integer */ delay?: number /** * Custom class to add on show * @default '' *

Possible value

* string */ cls?: string /** * Toggled active class * @default 'uk-active' *

Possible value

* string */ activeClass?: string } /** * Easily create a nicely looking tooltip. * Documentation {@link http://getuikit.org/docs/tooltip.html} */ interface Tooltip { /** * Init element manually * @param element * @param options */ (element:string|JQuery, options:TooltipOptions): any } interface UploadOptions { /** * Target url for the upload * @default '' *

Possible value

* string */ action?: string /** * Send each file one by one * @default true *

Possible value

* boolean */ single?: boolean /** * Post query name * @default files[] *

Possible value

* string */ param?: string /** * Additional request parameters * @default {} *

Possible value

* JSON Object */ params?: {} /** * File filter * @default *.* *

Possible value

* string */ allow?: string /** * Limit the number of files to upload * @default false *

Possible value

* integer */ filelimit?: number /** * Response type from server * @default text *

Possible Value

* (text|json) */ "type"?: string before?: (settings: UploadOptions, files: string|string[]) => any beforeAll?: (files: string|string[]) => any beforeSend?: (xhr: XMLHttpRequest) => any progress?: (percent: number) => any complete?: (response: any, xhr: XMLHttpRequest) => any allcomplete?: (response: any, xhr: XMLHttpRequest) => any notallowed?: (file: string|string[], settings: UploadOptions) => any loadstart?: (event: any) => any load?: (event: any) => any loadend?: (event: any) => any error?: (event: any) => any abort?: (event: any) => any readystatechange?: (event: any) => any } /** * Allow users to upload files through a file input form element or a placeholder area. * Documentation {@link http://getuikit.org/docs/upload.html} *

Callbacks

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
NameParameter
beforesettings, files
beforeAllfiles
beforeSendxhr
progresspercent
completeresponse, xhr
allcompleteresponse, xhr
notallowedfile, settings
loadstartevent
loadevent
loadendevent
errorevent
abortevent
readystatechangeevent
*/ interface Upload { /** * Init element manually * @param element * @param options */ (element:string|JQuery, options:UploadOptions): any } export var modal:Modal; export var lightbox:LightBox; export var offcanvas:OffCanvas; export var autocomplete:AutoComplete; export var datepicker:DatePicker; export var htmleditor:HtmlEditor; export var slider:Slider; export var slideset:SlideSet; export var slideshow:SlideShow; export var parallax:Parallax; export var accordion:Accordion; export var notify:Notify; export var search:Search; export var nestable:Nestable; export var sortable:Sortable; export var sticky:Sticky; export var timepicker:Timepicker; export var tooltip:Tooltip; export var uploadSelect: Upload; export var uploadDrop: Upload; } declare module 'uikit' { export = UIkit }