nativescript-material-tabs


Installation

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

$3

Plain NativeScript

IMPORTANT: _Make sure you include xmlns:mds="nativescript-material-tabs" on the Page element_

$3

`XML




































`

$3

`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;
}
`

NativeScript + Angular

`typescript
import { NativeScriptMaterialTabsModule } from "nativescript-material-slider/angular";

@NgModule({
imports: [
NativeScriptMaterialTabsModule,
...
],
...
})
`

`html


































`

NativeScript + Vue

`javascript
import TabsPlugin from 'nativescript-material-slider/vue';

Vue.use(TabsPlugin);
`

`html


































``

Attributes

Inherite from Nativescript Tabs so it already has all the same attributes

Attributes

| Name |Type| Description|
| ------------- |:-------------:| -----:|
| items | Array | Gets or sets the items of the BottomNavigation.|
|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|

Events

|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.