fix(tab-bar): add a built-in scroller if the default slot is not a sc…

…roller (#313) fixes #312
matsp · Jul 1, 2019 · 0650e3d · 0650e3d
1 parent e6d231d
commit 0650e3d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/components/tabs/TabBar.vue b/components/tabs/TabBar.vue
@@ -4,7 +4,18 @@
     role="tablist"
     @MDCTabBar:activated="onActivated"
   >
-    <slot />
+    <slot v-if="$slots.default[0].tag.includes('m-tab-scroller')" />
+    <!-- todo: it doesn't work with <div class='mdc-tab-scroller'> but only work with our own m-tab-scroller component. This need to be enhanced. -->
+    <div
+      v-else
+      class="mdc-tab-scroller"
+    >
+      <div class="mdc-tab-scroller__scroll-area">
+        <div class="mdc-tab-scroller__scroll-content">
+          <slot />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -53,6 +64,7 @@ export default {
     }
   },
   mounted () {
+    console.log(this.$slots.default[0].tag)
     this.mdcTabBar = MDCTabBar.attachTo(this.$el)
     this.mdcTabBar.focusOnActivate = this.focusOnActivate
     this.mdcTabBar.useAutomaticActivation = this.useAutomaticActivation

diff --git a/components/tabs/TabIndicator.vue b/components/tabs/TabIndicator.vue
@@ -15,7 +15,6 @@ import { MDCTabIndicator } from '@material/tab-indicator'
 import { baseComponentMixin, themeClassMixin } from '../base'
 
 export default {
-  name: 'TabIndicator',
   mixins: [baseComponentMixin, themeClassMixin],
   props: {
     fade: {

diff --git a/components/tabs/TabScroller.vue b/components/tabs/TabScroller.vue
@@ -13,7 +13,6 @@ import { MDCTabScroller } from '@material/tab-scroller'
 import { baseComponentMixin, themeClassMixin } from '../base'
 
 export default {
-  name: 'TabScroller',
   mixins: [baseComponentMixin, themeClassMixin],
   data () {
     return {