Material Tabs component




If using ``@nativescript` :tns plugin add nativescript-material-tabs
*
Be sure to run a new build after adding plugins to avoid any issues.
---
##### Material Design Spec
IMPORTANT: _Make sure you include xmlns:mds="nativescript-material-tabs" on the Page element_
`XML
`
`CSS
MDTabs.bottom-nav {
background-color: orangered;
color: gold;
font-size: 18;
}
TabStripItem.tabstripitem-active {
background-color: teal;
}
TabStripItem.tabstripitem-active:active {
background-color: yellowgreen;
}
TabContentItem.first-tabcontent {
background-color: seashell;
color: olive;
}
TabContentItem.second-tabcontent {
background-color: slategray;
color: aquamarine;
}
TabContentItem.third-tabcontent {
background-color: blueviolet;
color: antiquewhite;
}
MDTabs TabStrip {
highlight-color: red;
}
`
`typescript
import { NativeScriptMaterialTabsModule } from "nativescript-material-slider/angular";
@NgModule({
imports: [
NativeScriptMaterialTabsModule,
...
],
...
})
`
`html
`
`javascript
import TabsPlugin from 'nativescript-material-slider/vue';
Vue.use(TabsPlugin);
`
`html
``
Inherite from Nativescript Tabs so it already has all the same attributes
| Name |Type| Description|
| ------------- |:-------------:| -----:|
| items | Array
|selectedIndex | number | Gets or sets the selectedIndex of the BottomNavigation.|
|swipeEnabled | boolean | Gets or sets the swipe enabled state of the Tabs.|
|offscreenTabLimit | number | Gets or sets the number of offscreen preloaded tabs of the Tabs.|
|tabStrip |TabStrip | Gets or sets the tab strip of the BottomNavigation.|
|tabsPosition | "top", "bottom" | Gets or sets the position state of the Tabs. Default value: top|
|iOSTabBarItemsAlignment | "leading", "justified", "center", "centerSelected" |iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified|
|Name | Description|
| ------------- |:-------------:| -----:|
|selectedIndexChanged | Emitted when the selectedIndex property is changed.
|loaded | Emitted when the view is loaded.
|unloaded | Emitted when the view is unloaded.
|layoutChanged | Emitted when the layout bounds of a view changes due to layout processing.