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
role="tablist"
@MDCTabBar:activated="tabActivated"
v-tab-bar
>
class="mdc-tab"
role="tab"
aria-selected="true"
tabindex="0"
v-tab
>
aria-hidden="true"
>access_time >
Recents
>
class="mdc-tab"
role="tab"
aria-selected="true"
tabindex="0"
v-tab
>
aria-hidden="true"
>near_me >
Near By
>
class="mdc-tab"
role="tab"
aria-selected="true"
tabindex="0"
v-tab
>
aria-hidden="true"
>favorite >
>Favorites >
>
v-if="activeTab == 'tabRecent' "
>
Recent Tab Selected
See working examples at https://surevelox.github.io/vueable-material/