Material Design Component scrolling tab not scrolling

Question

I am using mdc-tab-scroller in my vue.js application. I want to have the scroll behaviour as in here under the section of "scrolling tabs". Have tried different approaches but don't know how to get it working. This is my very first experience with vue.js and material design components so don't really know if I am on right path of implementation.

    <div class="mdc-tab-scroller">
        <div class="mdc-tab-scroller__scroll-area">
            <div class="mdc-tab-scroller__scroll-content">
                <mdc-tab-bar>
                    <mdc-tab :to="{ path: getTab1() }" >Tab1</mdc-tab>
                    <mdc-tab :to="{ path: getTab2() }" >Tab2</mdc-tab>
                    <mdc-tab :to="{ path: getTab3() }" >Tab3</mdc-tab>
                    <mdc-tab :to="{ path: getTab4() }" >Tab4</mdc-tab>
                    <mdc-tab :to="{ path: getTab5() }" >Tab5</mdc-tab>
                    <mdc-tab :to="{ path: getTab6() }" >Tab6</mdc-tab>
                </mdc-tab-bar> 
            </div>
        </div>
    </div>

you mean by scroll behavior the smooth animation of border-bottom? — Boussadjra Brahim, Sep 07 '18 at 11:52
No. I want "scrolling tabs" behaviour as in the link I have shared in my post (i-e https://material-components.github.io/material-components-web-catalog/#/component/tabs). Upon clicking a specific tab item, It is to bring in focus the tab that is not fully visible either on right side (when moving right) or left side (when moving left). — Learning Curve, Sep 07 '18 at 11:56
when you implement the same code you don't have that behavior? — Boussadjra Brahim, Sep 07 '18 at 11:59
I can see "@material/tab-scroller": "^0.39.0" under dependencies section of Package.json file — Learning Curve, Sep 07 '18 at 12:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/179633/discussion-between-learning-curve-and-boussadjra-brahim). — Learning Curve, Sep 07 '18 at 12:07

Material Design Component scrolling tab not scrolling

0 Answers0