• Public
  • Public/Protected
  • All

Nativescript UI Material Components

Nativescript Material Components


Build beautiful, usable products using Material Components for NativeScript.


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


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?


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

Generated using TypeDoc