Skip to content

Latest commit

 

History

History
90 lines (69 loc) · 8.09 KB

README.md

File metadata and controls

90 lines (69 loc) · 8.09 KB
Raw

Nativescript Material Components

lerna

Build beautiful, usable products using Material Components for NativeScript.

Installation

Android

Ensure your Android Theme is inheriting from MaterialComponents. 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.

Theming

Defining the theme and the default colors must be done a bit differently on iOS and Android

  • Android: You must set the colors through android Style
  • iOS: You must set the colors programmatically at your app startup
import { themer } from '@nativescript-community/ui-material-core';
if (global.isIOS) {
    themer.setPrimaryColor('#bff937');
    themer.setAccentColor('#ff8a39');
    themer.setSecondaryColor('#a830d7');
}

Mixins

Through this component you can apply elevation or rippleColor to any View. To enable that feature your must "install" the mixins. Make sure you do it before creating any view.

import { installMixins } from '@nativescript-community/ui-material-core';
installMixins();

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