Bezlepkin / ui-material-components

Monorepo that contains all of the NativeScript Material Design plugins.

Nativescript Material Components

Build beautiful, usable products using Material Components for NativeScript.

Components

Name	README	npm	Material design
Circular progress indicator	README.md	@nativescript-community/ui-material-activityindicator	Circular progress indicators
Bottom navigation	README.md	@nativescript-community/ui-material-bottom-navigation	Bottom navigation
Bottom navigation bar	README.md	@nativescript-community/ui-material-bottomnavigationbar	Bottom navigation
Bottom sheet	README.md	@nativescript-community/ui-material-bottomsheet	Sheets: bottom
Button	README.md	@nativescript-community/ui-material-button	Buttons
Card	README.md	@nativescript-community/ui-material-cardview	Cards
Dialogs	README.md	@nativescript-community/ui-material-dialogs	Dialogs
Floating action button	README.md	@nativescript-community/ui-material-floatingactionbutton	Buttons: floating action button
Linear progress indicator	README.md	@nativescript-community/ui-material-progress	Linear progress indicators
Ripple	README.md	@nativescript-community/ui-material-ripple	Ripple
Slider	README.md	@nativescript-community/ui-material-slider	Sliders
Snackbar	README.md	@nativescript-community/ui-material-snackbar	Snackbars
Speed dial	README.md	@nativescript-community/ui-material-speeddial	Speed dial
Tabs	README.md	@nativescript-community/ui-material-tabs	Tabs
Text field	README.md	@nativescript-community/ui-material-textfield	Text fields
Text view	README.md	@nativescript-community/ui-material-textview	Material Text View

FAQ

Question: How to use the latest version of this plugin for iOS?

Answer: To get latest versions of Material Components for iOS (> 112.1) you will need to change Pod min version to 10.0 To do that modify or create App_Resources/iOS/Podfile to add platform :ios, '10.0'. You can see an example in the demo-vue app.

Q: How to migrate to AndroidX with this plugin installed (Android only)?

A: For Material Components to work correctly with {N} 6 and AndroidX you need to update your android app theme. Inside App_resources/android/res/values/styles.xml replace all occurences of Theme.AppCompat with Theme.MaterialComponents You can see an example in the demo-vue app.

Q: What is the difference between Bottom Navigation and Bottom Navigation Bar component?

A: The Bottom Navigation Bar is a new component to draw a bottom navigation bar in material design. The Bottom Navigation component is a simple extract of the eponymous component from NativeScript, which probably will be removed in the future so this one can be used for easy transition.

Q: How can I contribute?

A:

npm i
npm run setup # this should happen for every typescript update
npm run tsc
npm run demo.ios
npm run demo.android