# nativescript-mdc

> NativeScript Material Design Components.

Latest version **0.5.0** (published 2019-11-19) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install nativescript-mdc
pnpm add nativescript-mdc
yarn add nativescript-mdc
bun add nativescript-mdc
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2019-11-19 |
| First published | 2018-07-06 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 973.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Stefan Charsley |
| Maintainers | charsleysa |
| Keywords | NativeScript, JavaScript, Android, iOS |

## Links

- npm: https://www.npmjs.com/package/nativescript-mdc
- Homepage: https://github.com/charsleysa/nativescript-mdc
- Issues: https://github.com/charsleysa/nativescript-mdc/issues
- npm.io page: https://npm.io/package/nativescript-mdc

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.5.0 (latest) — 2019-11-19
- 0.4.2 — 2019-10-11
- 0.4.1 — 2019-10-11
- 0.4.0 — 2019-10-11
- 0.3.12 — 2019-08-26
- 0.3.11 — 2019-08-26
- 0.3.10 — 2019-08-21
- 0.3.9 — 2019-08-21
- 0.3.8 — 2019-08-19
- 0.3.7 — 2019-07-29
- 0.3.6 — 2019-07-25
- 0.3.5 — 2019-07-25
- 0.3.4 — 2019-07-24
- 0.3.3 — 2019-07-24
- 0.3.2 — 2019-07-24
- … 18 more at https://npm.io/package/nativescript-mdc/versions

## README

# 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](https://github.com/henrychavez/nativescript-bottom-navigation)
[nativescript-cardview](https://github.com/bradmartin/nativescript-cardview)
[nativescript-floatingactionbutton](https://github.com/bradmartin/nativescript-floatingactionbutton)
[nativescript-material-components](https://github.com/Akylas/nativescript-material-components)

## (Optional) Prerequisites / Requirements

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

## Installation

```javascript
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

```xml
<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>
```

```javascript
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

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

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

You can declare the BottomNavigationTabs in your html directly

```xml
<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>
```

```javascript
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](https://github.com/EddyVerbruggen/nativescript-feedback) for example.
    
| Property | Default | Description |
| --- | --- | --- |
| some property | property default value | property description, default values, etc.. |
| another property | property default value | property description, default values, etc.. |
    
## License

Apache License Version 2.0, January 2004

---
_Source: https://npm.io/package/nativescript-mdc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._