implement scroll on Tabs header

docs/src/pages/components/Tabs.vue

@@ -141,7 +141,7 @@
       <div slot="example">
         <example-box card-title="Default">
           <div slot="demo">
-            <md-tabs :md-dynamic-height="false">
+            <md-tabs :md-dynamic-height="false" md-scrollable-header>
               <md-tab id="movies" md-label="Movies">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
               </md-tab>
@@ -158,6 +158,22 @@
               <md-tab id="pictures" md-label="Pictures" md-tooltip="This is the pictures tab!">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
               </md-tab>
+
+              <md-tab id="playlists" md-label="Playlists">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
+              </md-tab>
+
+              <md-tab id="albums" md-label="Albums">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
+              </md-tab>
+
+              <md-tab id="albums-2" md-label="Albums">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
+              </md-tab>
+
+              <md-tab id="albums-3" md-label="Albums">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
+              </md-tab>
             </md-tabs>
           </div>
 

src/components/mdTabs/mdTabs.scss

@@ -19,6 +19,17 @@ $tab-max-width: 264px;
     }
   }
 
+  &.md-scrollable-header {
+    .md-tabs-navigation {
+      overflow: hidden;
+    }
+
+    .md-tabs-navigation-container {
+      margin-bottom: -15px;
+      overflow-x: auto;
+    }
+  }
+
   .md-tabs-navigation {
     height: 48px;
     min-height: 48px;
@@ -50,12 +61,15 @@ $tab-max-width: 264px;
     }
   }
 
+  .md-tabs-navigation-container {
+    display: flex;
+  }
+
   .md-tab-header {
     min-width: $tab-width;
     max-width: $tab-max-width;
     margin: 0;
     padding: 0 12px;
-    display: inline-block;
     position: relative;
     cursor: pointer;
     border: 0;
@@ -65,6 +79,7 @@ $tab-max-width: 264px;
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
+    flex-shrink: 0;
 
     &.md-disabled {
       cursor: default;

src/components/mdTabs/mdTabs.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="md-tabs" :class="[themeClass, tabClasses]">
     <md-whiteframe md-tag="nav" class="md-tabs-navigation" :md-elevation="mdElevation" :class="navigationClasses">
+      <div class="md-tabs-navigation-container" ref="tabsContainer" @scroll="calculateIndicatorPos">
       <button
         v-for="header in tabList"
         :key="header.id"
@@ -19,6 +20,7 @@
       </button>
 
       <span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
+      </div>
     </md-whiteframe>
 
     <div class="md-tabs-content" ref="tabContent" :style="{ height: contentHeight }">
@@ -39,6 +41,7 @@
       mdFixed: Boolean,
       mdCentered: Boolean,
       mdRight: Boolean,
+      mdScrollableHeader: Boolean,
       mdDynamicHeight: {
         type: Boolean,
         default: true
@@ -63,7 +66,8 @@
       tabClasses() {
         return {
           'md-dynamic-height': this.mdDynamicHeight,
-          'md-transition-off': this.transitionOff
+          'md-transition-off': this.transitionOff,
+          'md-scrollable-header': this.mdScrollableHeader
         };
       },
       navigationClasses() {
@@ -137,7 +141,7 @@
         if (this.$refs.tabHeader) {
           let tabsWidth = this.$el.offsetWidth;
           let activeTab = this.$refs.tabHeader[this.activeTabNumber];
-          let left = activeTab.offsetLeft;
+          let left = activeTab.offsetLeft - this.$refs.tabsContainer.scrollLeft;
           let right = tabsWidth - left - activeTab.offsetWidth;
 
           this.$refs.indicator.style.left = left + 'px';