V0.98.0 changes added

2026-04-24 05:06:02 +08:00 · 2017-01-30 20:45:31 -05:00
parent 08c30a2c3d
commit 9fb51ac8c3
2 changed files with 265 additions and 181 deletions
--- a/materialize-css/index.d.ts
+++ b/materialize-css/index.d.ts
@@ -1,6 +1,6 @@
-// Type definitions for materialize-css v0.97.5
+// Type definitions for materialize-css v0.98.0
 // Project: http://materializecss.com/
-// Definitions by: Erik Lieben <https://github.com/eriklieben>, Leon Yu <https://github.com/leonyu>
+// Definitions by: Erik Lieben <https://github.com/eriklieben>, Leon Yu <https://github.com/leonyu>, Sukhdeep Singh <https://github.com/SinghSukhdeep>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

 /// <reference types="jquery" />
@@ -15,7 +15,7 @@ declare namespace Materialize {
        /**
        * A setting that changes the collapsible behavior to expandable instead of the default accordion style
        */
-        accordion: boolean;
+        accordion?: boolean;

        /**
         * Callback for Collapsible section close.
@@ -34,7 +34,23 @@ declare namespace Materialize {
        /**
        * The delay before the tooltip shows (in milliseconds)
        */
-        delay:number;
+        delay: number;
+        /**
+         * Tooltip text. Can use custom HTML if you set the html option
+         */
+        tooltip?: string;
+        /**
+         * Set the direction of the tooltip. 'top', 'right', 'bottom', 'left'. 
+         * 
+         * (Default: 'bottom')
+         */
+        position?: string;
+        /**
+         * Allow custom html inside the tooltip. 
+         * 
+         * (Default: false)
+         */
+        html?: boolean;
    }

    /**
@@ -46,43 +62,49 @@ declare namespace Materialize {
         * The duration of the transition enter in milliseconds.
         * Default: 300
         */
-        inDuration?:number;
+        inDuration?: number;

        /**
         * The duration of the transition out in milliseconds.
         * Default: 225
         */
-        outDuration?:number;
+        outDuration?: number;

-        // TODO: constrain_width
+        
        /**
         * If true, constrainWidth to the size of the dropdown activator.
         * Default: true
         */
-        constrain_width?:boolean;
+        constrainWidth?: boolean;
        /**
         * If true, the dropdown will open on hover.
         * Default: false
         */
-        hover?:boolean;
+        hover?: boolean;

        /**
         * This defines the spacing from the aligned edge.
         * Default: 0
         */
-        gutter?:number;
+        gutter?: number;

        /**
         * If true, the dropdown will show below the activator.
         * Default: false
         */
-        belowOrigin?:boolean;
+        belowOrigin?: boolean;

        /**
         * Defines the edge the menu is aligned to.
         * Default: 'left'
         */
-        alignment?:string;
+        alignment?: string;
+        /**
+         * If true, stops the event propagating from the dropdown origin click handler.
+         * 
+         * Default: false
+         */
+        stopPropagation?: boolean
    }

    /**
@@ -120,10 +142,10 @@ declare namespace Materialize {
     */
    interface CarouselOptions {
        /**
-         * Transition time.
+         * Transition duration in milliseconds
         * Default: 200
         */
-        time_constant?: number;
+        duration?: number;

        /**
         * Perspective zoom. If 0, all items are the same size.
@@ -147,13 +169,25 @@ declare namespace Materialize {
         * Set the width of the carousel.
         * Default: false
         */
-        full_width?: boolean;
+        fullWidth?: boolean;
+        /**
+         * Set to true to show indicators. 
+         * 
+         * Default: false
+         */
+        indicators?: boolean;
+        /**
+         * Don't wrap around and cycle through items.
+         * 
+         * Default: false
+         */
+        noWrap?: boolean;
    }

    /**
-     * The lean modal options
+     * The modal options
     */
-    interface LeanModalOptions {
+    interface ModalOptions {

        /**
         * Modal can be dismissed by clicking outside of the modal.
@@ -171,13 +205,23 @@ declare namespace Materialize {
         * Transition in duration.
         * Default: 300
         */
-        in_duration?: number;
+        inDuration?: number;

        /**
         * Transition out duration.
         * Default: 200
         */
-        out_duration?: number;
+        outDuration?: number;
+        /**
+         * Starting top style attribute
+         * Default: `4%`
+         */
+        startingTop?: string;
+        /**
+         * Ending top style attribute
+         * Default : `10%`
+         */
+        endingTop?: string;

        /**
         * Callback for Modal open.
@@ -201,19 +245,19 @@ declare namespace Materialize {
         * The distance in pixels from the top of the page where the element becomes fixed.
         * Default: 0
         */
-        top?:number;
+        top?: number;

        /**
         * The distance in pixels from the top of the page where the elements stops being fixed.
         * Default: Infinity
         */
-        bottom?:number;
+        bottom?: number;

        /**
         * The offset from the top the element will be fixed at.
         * Default: 0
         */
-        offset?:number;
+        offset?: number;
    }

    /**
@@ -273,44 +317,68 @@ declare namespace Materialize {
         * It will only be called once.
         * Example: 'console.log("hello, world!")';
         */
-        callback?: string;
+        callback?: Function;
    }

+    interface TabOptions {
        /**
+         * Execute a callback function when the tab is changed. 
+         * 
+         * The callback provides a parameter which refers to the current tab being shown.
+         */
+        onShow?: Function;
+
+        /**
+         * Set to true to enable swipeable tabs. This also uses the responsiveThreshold option.
+         * 
+         * Default: false
+         */
+        swipeable?: boolean;
+
+        /**
+         * The maximum width of the screen, in pixels, where the swipeable functionality initializes.
+         * 
+         * Default: Infinity
+         */
+        responsiveThreshold?: number;
+    }
+
+
+    /**
     * 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;
+         * 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;
+        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;
+        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;
+        fadeInImage(selector: string): void;

        /**
         * Update all text field to reinitialize all the Materialize labels on the page if dynamically adding inputs
@@ -319,7 +387,7 @@ declare namespace Materialize {
    }
 }

-declare var Materialize : Materialize.Materialize;
+declare var Materialize: Materialize.Materialize;

 interface JQuery {

@@ -365,7 +433,7 @@ interface JQuery {
     *
     * @name options the tooltip options or the string "remove" to remove the tooltip function
     */
-    tooltip(options?: Materialize.TooltipOptions|string): JQuery;
+    tooltip(options?: Materialize.TooltipOptions | string): JQuery;

    /**
     * Add a dropdown list to any button.
@@ -414,28 +482,32 @@ interface JQuery {
     *
     * @name method the methods to pause, start, move to next and move to previous slide.
     */
-    carousel(method: string, count: [number]): JQuery;
+    carousel(method: string, count?: number): JQuery;

    /**
-     *  Modal for dialog boxes, confirmation messages, or other content that can be called up.
+     * Modal for dialog boxes, confirmation messages, or other content that can be called up.
+     * 
+     * For Initialization.
+     */
+    modal(): JQuery;
+
+    /**
+     * Modal for dialog boxes, confirmation messages, or other content that can be called up.
+     * 
+     * For opening and closing modals programatically.
+     * 
+     * @name string action action to do (`open` or `close)
+     */
+    modal(action: string): void;
+
+    /**
+     * Modal for dialog boxes, confirmation messages, or other content that can be called up.
+     * 
+     * To customize the behaviour of a modal
     *
     * @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
-     *
-     * @name options the lean modal options
-     */
-    closeModal(options?: Materialize.LeanModalOptions): void;
+    modal(options: Materialize.ModalOptions): 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.
@@ -461,12 +533,19 @@ interface JQuery {
     *
     * @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;
+    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;
+    tabs(method?: string, tab?: string): JQuery;
+
+    /**
+     * Tab Initialization with options
+     *
+     * @name TabOptions options jQuery plugin options
+     */
+    tabs(options?: Materialize.TabOptions): JQuery;
 }
--- a/materialize-css/materialize-css-tests.ts
+++ b/materialize-css/materialize-css-tests.ts
@@ -22,7 +22,7 @@ $('input#input_text, textarea#textarea1').characterCounter();

 // Navbar
 $(".dropdown-button").dropdown();
-$(".dropdown-button").dropdown({hover: false});
+$(".dropdown-button").dropdown({ hover: false });

 $(".button-collapse").sideNav();

@@ -30,22 +30,22 @@ $(".button-collapse").sideNav();

 // 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>' +
+  '<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, onClose : function() { alert('Closed'); } });
-$(collapseHtml).collapsible({ accordion : true, onOpen : function() { alert('Opened'); } });
+$(collapseHtml).collapsible({ accordion: false, onClose: function () { alert('Closed'); } });
+$(collapseHtml).collapsible({ accordion: true, onOpen: function () { alert('Opened'); } });

 // Dialogs - Toasts
 Materialize.toast('I am a toast!', 4000);
@@ -57,19 +57,21 @@ 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>';
 $(tooltipHtml).tooltip();
-$(tooltipHtml).tooltip({delay: 100});
+$(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'
+  inDuration: 300,
+  outDuration: 225,
+  constrainWidth: false, // Does not change width of dropdown to that of the activator
+  hover: true, // Activate on hover
+  gutter: 0, // Spacing from edge
+  belowOrigin: false, // Displays dropdown below the button
+  alignment: 'left', // Displays dropdown with edge aligned to the left of button
+  stopPropagation: false // Stops event propagation
+
 });
 $(dropDownHtml).dropdown({});

@@ -79,136 +81,138 @@ $(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>' +
+  '<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 });
+$(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 });

 // Carousel

 $('.carousel').carousel();
 $('.carousel').carousel({});
-$('.carousel').carousel({ time_constant: 200, dist: -100, shift: 500, padding: 6000, full_width: true });
+$('.carousel').carousel({ duration: 200, dist: -100, shift: 500, padding: 6000, fullWidth: true, indicators: false, noWrap: false });

 // Next slide
 $('.carousel').carousel('next');
-$('.carousel').carousel('next', [3]); // Move next n times.
+$('.carousel').carousel('next', 3); // Move next n times.
 // Previous slide
 $('.carousel').carousel('prev');
-$('.carousel').carousel('prev', [4]); // Move prev n times.
+$('.carousel').carousel('prev', 4); // Move prev n times.


 // 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 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();
+$(modalhtml).modal('open');
+$(modalhtml).modal('close');

 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')});
+$(modalTriggerHtml).modal();
+$(modalTriggerHtml).modal({});
+$(modalTriggerHtml).modal({ dismissible: true });
+$(modalTriggerHtml).modal({ dismissible: true, opacity: 1 });
+$(modalTriggerHtml).modal({ dismissible: true, opacity: 1, inDuration: 100 });
+$(modalTriggerHtml).modal({ dismissible: true, opacity: 1, inDuration: 100, outDuration: 100 });
+$(modalTriggerHtml).modal({ dismissible: true, opacity: 1, inDuration: 100, outDuration: 100, startingTop: "4%" });
+$(modalTriggerHtml).modal({ dismissible: true, opacity: 1, inDuration: 100, outDuration: 100, startingTop: "4%", endingTop: "10%" });
+$(modalTriggerHtml).modal({ dismissible: true, opacity: 1, inDuration: 100, outDuration: 100, startingTop: "4%", endingTop: "10%", ready: () => console.log('ready') });
+$(modalTriggerHtml).modal({ dismissible: true, opacity: 1, inDuration: 100, outDuration: 100, startingTop: "4%", endingTop: "10%", 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();
+  '<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 });
+// 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")' },
+  { 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 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>' +
+  '<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>' +
+  '<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>';
+  '</nav>';
 $(sideNavHtml).sideNav();
 $(sideNavHtml).sideNav({});
 $(sideNavHtml).sideNav({ menuWidth: 100 });
@@ -220,22 +224,23 @@ $(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 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');
+$(tabsHtml).tabs();
+$(tabsHtml).tabs('select_tab', 'test1');
+$(tabsHtml).tabs({ onShow: (currentTab: any) => { console.log(currentTab) }, swipeable: false, responsiveThreshold: 5000 });

 // Transitions
 Materialize.showStaggeredList('#staggered-test');