@nativescript-community/ui-material-bottom-navigation
Material Design Bottom Navigation bars allow movement between primary destinations in an app. Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view.
NativeScript Material Bottom navigation
Material Design's Bottom navigation component for NativeScript.
Contents
Installation
:warning: Warning :warning:
From NativeScript 5.x using this component will break the NativeScript tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either bottomnavigationbar (this one is the best choice, closest to material design) or material-tabs (clone of the NativeScript one, but with a little less features).
ns plugin add @nativescript-community/ui-material-bottom-navigation
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-bottom-navigation"
on the Page element.
XML
<Page xmlns:mdt="@nativescript-community/ui-material-bottom-navigation">
<mdt:BottomNavigation selectedIndex="1">
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
<mdt:TabStrip>
<mdt:TabStripItem>
<Label text="Home"></Label>
<Image src="font://" class="fas"></Image>
</mdt:TabStripItem>
<mdt:TabStripItem class="special">
<Label text="Account"></Label>
<Image src="font://" class="fas"></Image>
</mdt:TabStripItem>
<mdt:TabStripItem class="special">
<Label text="Search"></Label>
<Image src="font://" class="fas"></Image>
</mdt:TabStripItem>
</mdt:TabStrip>
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
<mdt:TabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
<mdt:TabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
<mdt:TabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
</mdt:BottomNavigation>
</Page>
CSS
MDBottomNavigation.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;
}
MDBottomNavigation TabStrip {
highlight-color: red;
}
NativeScript + Angular
import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-bottom-navigation/angular";
@NgModule({
imports: [
NativeScriptMaterialBottomNavigationModule,
...
],
...
})
<MDBottomNavigation selectedIndex="1">
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
<MDTabStrip>
<MDTabStripItem>
<Label text="Home"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Account"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Search"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
</MDTabStrip>
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
<MDTabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
</MDBottomNavigation>
NativeScript + Vue
import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';
Vue.use(BottomNavigation);
<MDBottomNavigation selectedIndex="1">
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
<MDTabStrip>
<MDTabStripItem>
<Label text="Home"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Account"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Search"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
</MDTabStrip>
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
<MDTabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
</MDBottomNavigation>
API
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. |