nativescript-mdc

NativeScript-MDC provides Material Design Components using the official MDC libraries for iOS and Android.

Currently only the following components have been implemented:

• Activity Indicator
• Bottom App Bar
• Bottom Navigation
• Bottom Sheet
• Button
• Card View
• Dialogs
• Floating Action Button
• Progress
• Ripple
• Slider
• Snack Bar
• Text Field

Thanks to the following plugins for providing a reference when building this plugin: nativescript-bottom-navigation nativescript-cardview nativescript-floatingactionbutton nativescript-material-components

(Optional) Prerequisites / Requirements

You need NativeScript version ^6.0.0 to be able to use this plugin.

Installation

tns plugin add nativescript-mdc

Usage

Usage is per component. To give an overview of how to use the components below is a very minimal example of the Bottom Navigation.

XML

You can set the tabs using the tabs property

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:mdc="nativescript-mdc"
      loaded="pageLoaded"
      class="page">
    <GridLayout columns="*" rows="*, auto">
        <StackLayout row="0">
            <Label text="content"></Label>
        </StackLayout>
        <mdc:BottomNavigation
            tabs="{{ tabs }}"
            activeColor="blue"
            inactiveColor="red"
            loaded="bottomNavigationLoaded"
            titleVisibility="always"
            row="1">
        </mdc:BottomNavigation>
    </GridLayout>
</Page>

import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import { BottomNavigation, BottomNavigationTab, OnTabSelectedEventData } from "nativescript-mdc";

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
    // Get the event sender
    let page = <pages.Page>args.object;
    page.bindingContext = {
        tabs: [
            new BottomNavigationTab('First', 'ic_home'),
            new BottomNavigationTab('Second', 'ic_view_list', null, false),
            new BottomNavigationTab('Third', 'ic_menu'),
            new BottomNavigationTab('Forth', 'ic_view_list', 'ic_menu')
        ]
    };
}

export function bottomNavigationLoaded(args) {
    let bottomNavigation: BottomNavigation = args.object;
    // For some reason the tabSelected event doesn't work if you
    // handle it from the view, so you need to handle the event in this way.
    bottomNavigation.on('tabSelected', tabSelected);
}

export function tabSelected(args: OnTabSelectedEventData) {
    console.log('tab selected ' + args.newIndex);
}

Angular

First you need to include the NativeScriptMDCModule in your app.module.ts

import { NativeScriptMDCModule} from "nativescript-mdc/angular";

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

You can declare the BottomNavigationTabs in your html directly

<GridLayout rows="*, auto">
    <StackLayout row="0">
       <Label text="content"></Label>
    </StackLayout>
    <BottomNavigation
        activeColor="red"
        inactiveColor="yellow"
        (tabSelected)="onBottomNavigationTabSelected($event)"
        titleVisibility="always"
        row="1">
        <BottomNavigationTab title="First" icon="ic_home"></BottomNavigationTab>
        <BottomNavigationTab title="Second" icon="ic_view_list" selectable="false"></BottomNavigationTab>
        <BottomNavigationTab title="Third" icon="ic_menu"></BottomNavigationTab>
        <BottomNavigationTab title="Forth" icon="ic_view_list" selectedIcon="ic_menu"></BottomNavigationTab>
    </BottomNavigation>
</GridLayout>

import { Component, OnInit } from '@angular/core';
import { OnTabSelectedEventData } from 'nativescript-mdc';

@Component(
  {
    selector: 'ns-app',
    moduleId: module.id,
    templateUrl: './app.component.html',
  }
)
export class AppComponent {
  onBottomNavigationTabSelected(args: OnTabSelectedEventData): void {
    console.log(`Tab selected:  ${args.newIndex}`);
  }
}

API

TODO Describe your plugin methods and properties here. See nativescript-feedback for example.

License

Apache License Version 2.0, January 2004