Material Tab - Vue directive
npm install @vueable-material/tabTabv-tab, v-tab-bar, v-tab-indicator and v-tab-scroller Vue Directives for MDC Tab - MDC Web (Material Components for Web).
!npm (scoped)


``bash`
npm install @vueable-material/tab --save
Use in Vue Component
`javascript
import { Tab, TabBar, TabIndicator, TabScroller } from '@vueable-material/tab';
export default {
directives: {
Tab,
TabBar,
TabIndicator,
TabScroller,
},
};
`
Define HTML and use MDC Web CSS/SCCSS
`html
class="mdc-tab-bar"
role="tablist"
@MDCTabBar:activated="tabActivated"
v-tab-bar
>
id="tabRecent"
class="mdc-tab"
role="tab"
aria-selected="true"
tabindex="0"
v-tab
>
class="mdc-tab__icon material-icons"
aria-hidden="true"
>access_time >
Recents
class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"
>
id="tabNearBy"
class="mdc-tab"
role="tab"
aria-selected="true"
tabindex="0"
v-tab
>
class="mdc-tab__icon material-icons"
aria-hidden="true"
>near_me >
Near By
class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"
>
id="tabFavorite"
class="mdc-tab"
role="tab"
aria-selected="true"
tabindex="0"
v-tab
>
class="mdc-tab__icon material-icons"
aria-hidden="true"
>favorite >
>Favorites >
class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"
>
style="border-top: 1px solid #ccc; padding: 20px;"
v-if="activeTab == 'tabRecent' "
>
Recent Tab Selected
See working examples at https://surevelox.github.io/vueable-material/