Skip to content

Commit de280e9

Browse files
farfromrefugfarfromrefug
committed
chore: readme update
1 parent dc93619 commit de280e9

File tree

3 files changed

+135
-1
lines changed

3 files changed

+135
-1
lines changed

‎README.md

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,51 @@
1-
<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->This monorepo contains multiple packages:<br><br><details>
1+
<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
2+
[](#nativescript-material-components)
3+
4+
# Nativescript Material Components
5+
6+
[![License: Apache 2.0](https://img.shields.io/badge/License-Apache%20v2-yellow.svg)](https://opensource.org/license/apache-2-0/)
7+
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
8+
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/lerna-lite/lerna-lite)
9+
10+
Build beautiful, usable products using Material Components for NativeScript.
11+
12+
13+
[](#installation)
14+
15+
## Installation
16+
17+
### Android
18+
Ensure your Android Theme is inheriting from `MaterialComponents`.
19+
Inside ```App_resources/android/res/values/styles.xml``` replace all occurences of ```Theme.AppCompat``` with ```Theme.MaterialComponents```
20+
You can see an example in the demo-vue app.
21+
22+
23+
[](#theming)
24+
25+
## Theming
26+
Defining the theme and the default colors must be done a bit differently on iOS and Android
27+
28+
* **Android**: You must set the colors through [android Style](https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md#appcompat-themes)
29+
* **iOS**: You must set the colors programmatically at your app startup
30+
```typescript
31+
import { themer } from '@nativescript-community/ui-material-core';
32+
if (global.isIOS) {
33+
themer.setPrimaryColor('#bff937');
34+
themer.setAccentColor('#ff8a39');
35+
themer.setSecondaryColor('#a830d7');
36+
}
37+
```
38+
39+
40+
[](#mixins)
41+
42+
## Mixins
43+
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.
44+
```typescript
45+
import { installMixins } from '@nativescript-community/ui-material-core';
46+
installMixins();
47+
```
48+
This monorepo contains multiple packages:<br><br><details>
249
<summary><b>activityindicator</b></summary>
350

451
[](#nativescript-material-circular-progress-indicator)
@@ -2981,6 +3028,34 @@ A boolean attribute to set the floating state of the textview.
29813028

29823029
</details>
29833030

3031+
[](#faq)
3032+
3033+
## FAQ
3034+
3035+
**Question:** How to use the latest version of this plugin for iOS?
3036+
3037+
**Answer:** To get latest versions of Material Components for iOS (> 112.1) you will need to change Pod min version to 10.0
3038+
To do that modify or create `App_Resources/iOS/Podfile` to add `platform :ios, '10.0'`.
3039+
You can see an example in the demo-vue app.
3040+
3041+
##
3042+
3043+
**Q:** How to migrate to AndroidX with this plugin installed (Android only)?
3044+
3045+
**A:** For Material Components to work correctly with {N} 6 and AndroidX you need to update your android app theme.
3046+
Inside ```App_resources/android/res/values/styles.xml``` replace all occurences of ```Theme.AppCompat``` with ```Theme.MaterialComponents```
3047+
You can see an example in the demo-vue app.
3048+
3049+
##
3050+
3051+
**Q:** What is the difference between Bottom Navigation and Bottom Navigation Bar component?
3052+
3053+
**A:** The _Bottom Navigation Bar_ is a new component to draw a bottom navigation bar in material design.
3054+
The _Bottom Navigation_ component is a simple extract of the [eponymous component from NativeScript](https://docs.nativescript.org/ui/components/bottom-navigation), which probably will be removed in the future so this one can be used for easy transition.
3055+
3056+
##
3057+
3058+
29843059
[](#demos-and-development)
29853060

29863061
## Demos and Development

‎header.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Nativescript Material Components
2+
3+
[![License: Apache 2.0](https://img.shields.io/badge/License-Apache%20v2-yellow.svg)](https://opensource.org/license/apache-2-0/)
4+
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
5+
[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/lerna-lite/lerna-lite)
6+
7+
Build beautiful, usable products using Material Components for NativeScript.
8+
9+
## Installation
10+
11+
### Android
12+
Ensure your Android Theme is inheriting from `MaterialComponents`.
13+
Inside ```App_resources/android/res/values/styles.xml``` replace all occurences of ```Theme.AppCompat``` with ```Theme.MaterialComponents```
14+
You can see an example in the demo-vue app.
15+
16+
## Theming
17+
Defining the theme and the default colors must be done a bit differently on iOS and Android
18+
19+
* **Android**: You must set the colors through [android Style](https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md#appcompat-themes)
20+
* **iOS**: You must set the colors programmatically at your app startup
21+
```typescript
22+
import { themer } from '@nativescript-community/ui-material-core';
23+
if (global.isIOS) {
24+
themer.setPrimaryColor('#bff937');
25+
themer.setAccentColor('#ff8a39');
26+
themer.setSecondaryColor('#a830d7');
27+
}
28+
```
29+
30+
## Mixins
31+
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.
32+
```typescript
33+
import { installMixins } from '@nativescript-community/ui-material-core';
34+
installMixins();
35+
```

‎info.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
## FAQ
2+
3+
**Question:** How to use the latest version of this plugin for iOS?
4+
5+
**Answer:** To get latest versions of Material Components for iOS (> 112.1) you will need to change Pod min version to 10.0
6+
To do that modify or create `App_Resources/iOS/Podfile` to add `platform :ios, '10.0'`.
7+
You can see an example in the demo-vue app.
8+
9+
##
10+
11+
**Q:** How to migrate to AndroidX with this plugin installed (Android only)?
12+
13+
**A:** For Material Components to work correctly with {N} 6 and AndroidX you need to update your android app theme.
14+
Inside ```App_resources/android/res/values/styles.xml``` replace all occurences of ```Theme.AppCompat``` with ```Theme.MaterialComponents```
15+
You can see an example in the demo-vue app.
16+
17+
##
18+
19+
**Q:** What is the difference between Bottom Navigation and Bottom Navigation Bar component?
20+
21+
**A:** The _Bottom Navigation Bar_ is a new component to draw a bottom navigation bar in material design.
22+
The _Bottom Navigation_ component is a simple extract of the [eponymous component from NativeScript](https://docs.nativescript.org/ui/components/bottom-navigation), which probably will be removed in the future so this one can be used for easy transition.
23+
24+
##

0 commit comments

Comments
 (0)