nativescript-nbmaterial-appbar

Nativescript implementation of the Material AppBarLayout

The module implement AppBarLayout on both iOS and Android. The layout extends the nativescript GridLayout. Use "nativescript-nbmaterial-coordinator" to make animation effects like sticky header or hide header on scroll. AppBarIcon and AppBarTitle extends nativescript Label. You can use a font library like material-icons or font-awesome.

  <!--
The markup in NativeScript apps contains a series of user interface components, each
of which NativeScript renders with a platform-specific iOS or Android native control.
You can find a full list of user interface components you can use in your app at
https://docs.nativescript.org/ui/components.
-->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
xmlns:app="nativescript-nbmaterial-appbar" navigatingTo="onNavigatingTo">
     <GridLayout rows="*" columns="*" id="root">  
        <app:AppBarLayout columns="auto,*,auto,auto" rows="auto,auto" id="actionbar">
            <app:AppBarIcon text="list" col="0"/>
            <app:AppBarTitle text="My Application" col="1"/>
            <app:AppBarIcon text="notifications" col="2"/>
            <app:AppBarIcon text="search" col="3" tap="openSearch"/> 
        </app:AppBarLayout>  
    </GridLayout>
</Page>
 
}

See all modules here