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
;;; // Event handler for Page 'loaded' event attached in main-page.xml { // Get the event sender let page = <pagesPage>argsobject; pagebindingContext = tabs: 'First' 'ic_home' 'Second' 'ic_view_list' null false 'Third' 'ic_menu' 'Forth' 'ic_view_list' 'ic_menu' ;} { let bottomNavigation: BottomNavigation = argsobject; // 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;} { console;}
Angular
First you need to include the NativeScriptMDCModule
in your app.module.ts
; @
You can declare the BottomNavigationTabs in your html directly
;; @ : void console;
API
TODO Describe your plugin methods and properties here. See 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