nativescript-nbmaterial-bottomnav
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

Nativescript implementation of the Material Bottom Navigation

The module implement Bottom Navigation Layout on both iOS and Android.
You can add a shit animation to nav items by adding "shifted" class to the component. Icon and Title extends nativescript Label. You can use a font library like material-icons or font-awesome.

If you want to use it as a root navigator your app.ts must looks like:

import "./bundle-config";
import {startWithMenu} from 'nativescript-nbmaterial-bottomnav';
 
startWithMenu({ moduleName: 'home/home-page' }, "menu/menu-page");

"moduleName" is your first screen.

And menu-page looks like:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
xmlns:bnav="nativescript-nbmaterial-bottomnav">
    <bnav:BottomNavigation autoselect="false" select="selectNav" id="bottomnav" class="shifted">
        <bnav:BottomNavigationItem>
            <bnav:Icon text="dashboard"  />
            <bnav:Title text="Home"/>
        </bnav:BottomNavigationItem>
        <bnav:BottomNavigationItem>
            <bnav:Icon text="add"/>
            <bnav:Title text="Ajouter" />
        </bnav:BottomNavigationItem>
        <bnav:BottomNavigationItem>
            <bnav:Icon text="favorite"/>
            <bnav:Title text="Consulter" />
        </bnav:BottomNavigationItem> 
    </bnav:BottomNavigation>  
</Page>
 
}

See all modules here

Package Sidebar

Install

npm i nativescript-nbmaterial-bottomnav

Weekly Downloads

1

Version

1.0.1

License

Apache-2.0

Unpacked Size

37.8 kB

Total Files

16

Last publish

Collaborators

  • nabil_mansouri