Skip to content

Commit 9cc4300

Browse files
farfromrefugfarfromrefug
committed
Merge branch 'master' of github.com:nativescript-community/ui-material-components
2 parents 31b2057 + c35e0fa commit 9cc4300

File tree

17 files changed

+706
-380
lines changed

17 files changed

+706
-380
lines changed

‎README.md

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,62 @@
11
# Nativescript Material Components
22

3-
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
3+
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
44

55
Build beautiful, usable products using Material Components for NativeScript.
66

77
## Components
88

9-
- [Button](./packages/button/README.md)
10-
- [Floating Action Button](./packages/floatingactionbutton/README.md)
11-
- [TextField](./packages/textfield/README.md)
12-
- [TextView](./packages/textview/README.md)
13-
- [CardView](./packages/cardview/README.md)
14-
- [Slider](./packages/slider/README.md)
15-
- [Progress](./packages/progress/README.md)
16-
- [ActivityIndicator](./packages/activityindicator/README.md)
17-
- [Dialogs](./packages/dialogs/README.md)
18-
- [Bottom Sheets](./packages/bottomsheet/README.md)
19-
- [Ripple View](./packages/ripple/README.md)
20-
- [Snackbar](./packages/snackbar/README.md)
21-
- [Bottom Navigation Bar](./packages/bottomnavigationbar/README.md)
9+
| Name | README | npm | Material design |
10+
| :---: | :---: | :---: | :---: |
11+
| Circular progress indicator | [README.md](./packages/activityindicator/README.md) | [@nativescript-community/ui-material-activityindicator](https://www.npmjs.com/package/@nativescript-community/ui-material-activityindicator) | [Circular progress indicators](https://material.io/components/progress-indicators#circular-progress-indicators) |
12+
| Bottom navigation | [README.md](./packages/bottom-navigation/README.md) | [@nativescript-community/ui-material-bottom-navigation](https://www.npmjs.com/package/@nativescript-community/ui-material-bottom-navigation) | [Bottom navigation](https://material.io/components/bottom-navigation) |
13+
| Bottom navigation bar | [README.md](./packages/bottomnavigationbar/README.md) | [@nativescript-community/ui-material-bottomnavigationbar](https://www.npmjs.com/package/@nativescript-community/ui-material-bottomnavigationbar) | [Bottom navigation](https://material.io/components/bottom-navigation) |
14+
| Bottom sheet | [README.md](./packages/bottomsheet/README.md) | [@nativescript-community/ui-material-bottomsheet](https://www.npmjs.com/package/@nativescript-community/ui-material-bottomsheet) | [Sheets: bottom](https://material.io/components/sheets-bottom) |
15+
| Button | [README.md](./packages/button/README.md) | [@nativescript-community/ui-material-button](https://www.npmjs.com/package/@nativescript-community/ui-material-button) | [Buttons](https://material.io/components/buttons) |
16+
| Card | [README.md](./packages/cardview/README.md) | [@nativescript-community/ui-material-cardview](https://www.npmjs.com/package/@nativescript-community/ui-material-cardview) | [Cards](https://material.io/components/cards) |
17+
| Dialogs | [README.md](./packages/dialogs/README.md) | [@nativescript-community/ui-material-dialogs](https://www.npmjs.com/package/@nativescript-community/ui-material-dialogs) | [Dialogs](https://material.io/components/dialogs) |
18+
| Floating action button | [README.md](./packages/floatingactionbutton/README.md) | [@nativescript-community/ui-material-floatingactionbutton](https://www.npmjs.com/package/@nativescript-community/ui-material-floatingactionbutton) | [Buttons: floating action button](https://material.io/components/buttons-floating-action-button) |
19+
| Linear progress indicator | [README.md](./packages/progress/README.md) | [@nativescript-community/ui-material-progress](https://www.npmjs.com/package/@nativescript-community/ui-material-progress) | [Linear progress indicators](https://material.io/components/progress-indicators#linear-progress-indicators) |
20+
| Ripple | [README.md](./packages/ripple/README.md) | [@nativescript-community/ui-material-ripple](https://www.npmjs.com/package/@nativescript-community/ui-material-ripple) | [Ripple](https://material.io/design/interaction/states.html#pressed) |
21+
| Slider | [README.md](./packages/slider/README.md) | [@nativescript-community/ui-material-slider](https://www.npmjs.com/package/@nativescript-community/ui-material-slider) | [Sliders](https://material.io/components/sliders) |
22+
| Snackbar | [README.md](./packages/snackbar/README.md) | [@nativescript-community/ui-material-snackbar](https://www.npmjs.com/package/@nativescript-community/ui-material-snackbar) | [Snackbars](https://material.io/components/snackbars) |
23+
| Speed dial | [README.md](./packages/speeddial/README.md) | [@nativescript-community/ui-material-speeddial](https://www.npmjs.com/package/@nativescript-community/ui-material-speeddial) | [Speed dial](https://material.io/components/buttons-floating-action-button#types-of-transitions) |
24+
| Tabs | [README.md](./packages/tabs/README.md) | [@nativescript-community/ui-material-tabs](https://www.npmjs.com/package/@nativescript-community/ui-material-tabs) | [Tabs](https://material.io/components/tabs) |
25+
| Text field | [README.md](./packages/textfield/README.md) | [@nativescript-community/ui-material-textfield](https://www.npmjs.com/package/@nativescript-community/ui-material-textfield) | [Text fields](https://material.io/components/text-fields) |
26+
| Text view | [README.md](./packages/textview/README.md) | [@nativescript-community/ui-material-textview](https://www.npmjs.com/package/@nativescript-community/ui-material-textview) | [Material Text View](https://material.io/develop/android/components/material-text-view) |
27+
28+
## FAQ
29+
30+
**Question:** How to use the latest version of this plugin for iOS?
31+
32+
**Answer:** To get latest versions of Material Components for iOS (> 112.1) you will need to change Pod min version to 10.0
33+
To do that modify or create `App_Resources/iOS/Podfile` to add `platform :ios, '10.0'`.
34+
You can see an example in the demo-vue app.
2235

36+
##
2337

24-
## iOS latest versions
38+
**Q:** How to migrate to AndroidX with this plugin installed (Android only)?
2539

26-
To get latest versions of Material Components for iOS (> 112.1) you will need to change Pod min version to 10.0
27-
To do that modify or create `App_Resources/iOS/Podfile` to add `platform :ios, '10.0'`.
40+
**A:** For Material Components to work correctly with {N} 6 and AndroidX you need to update your android app theme.
41+
Inside ```App_resources/android/res/values/styles.xml``` replace all occurences of ```Theme.AppCompat``` with ```Theme.MaterialComponents```
2842
You can see an example in the demo-vue app.
2943

30-
## Android migration to AndroidX
44+
##
3145

32-
For Material Components to work correctly with {N} 6 and AndroidX you need to update your android app theme.
33-
inside ```App_resources/android/res/values/styles.xml``` replace all occurences of ```Theme.AppCompat``` with ```Theme.MaterialComponents```
34-
You can see an example in the demo-vue app.
46+
**Q:** What is the difference between Bottom Navigation and Bottom Navigation Bar component?
3547

36-
## Contribution
48+
**A:** The _Bottom Navigation Bar_ is a new component to draw a bottom navigation bar in material design.
49+
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.
3750

51+
##
52+
53+
**Q:** How can I contribute?
54+
55+
**A:**
3856
```bash
3957
npm i
40-
npm run setup // this should happen for every typescript update
58+
npm run setup # this should happen for every typescript update
4159
npm run tsc
4260
npm run demo.ios
4361
npm run demo.android
4462
```
45-
46-

‎packages/activityindicator/README.md

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,51 @@
1-
[![npm](https://img.shields.io/npm/v/nativescript-material-activityindicator.svg)](https://www.npmjs.com/package/nativescript-material-activityindicator)
2-
[![npm](https://img.shields.io/npm/dt/nativescript-material-activityindicator.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-material-activityindicator)
3-
[![GitHub forks](https://img.shields.io/github/forks/Akylas/nativescript-material-components.svg)](https://github.com/Akylas/nativescript-material-components/network)
4-
[![GitHub stars](https://img.shields.io/github/stars/Akylas/nativescript-material-components.svg)](https://github.com/Akylas/nativescript-material-components/stargazers)
1+
# NativeScript Material Circular progress indicator
2+
3+
Material Design's [Circular progress indicator](https://material.io/design/components/progress-indicators.html#circular-progress-indicators) component for NativeScript.
4+
5+
[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-activityindicator.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-activityindicator)
6+
[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-activityindicator.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-activityindicator)
7+
8+
## Contents
9+
10+
1. [Installation](#installation)
11+
2. [Changelog](#changelog)
12+
3. [FAQ](#faq)
13+
4. [Usage](#usage)
14+
- [Plain NativeScript](#plain-nativescript)
15+
- [Angular](#nativescript--angular)
16+
- [Vue](#nativescript--vue)
17+
5. [API](#api)
518

619
## Installation
720

8-
For N 7.0
21+
For NativeScript 7.0+
922
* `tns plugin add @nativescript-community/ui-material-activityindicator`
1023

11-
For N 6.x
24+
##
25+
26+
For NativeScript 6.x
1227
* `tns plugin add nativescript-material-activityindicator`
1328

29+
##
30+
1431
If using ```tns-core-modules```
1532
* `tns plugin add [email protected]`
1633

17-
Be sure to run a new build after adding plugins to avoid any issues.
34+
##
1835

19-
---
36+
Be sure to run a new build after adding plugins to avoid any issues.
2037

21-
##### [Material Design Spec](https://material.io/design/components/progress-indicators.html#circular-progress-indicators)
38+
## [Changelog](./CHANGELOG.md)
2239

23-
### Usage
40+
## [FAQ](../../README.md#faq)
2441

42+
## Usage
2543

26-
## Plain NativeScript
44+
### Plain NativeScript
2745

28-
<span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:mda="@nativescript-community/ui-material-activityindicator"` on the Page element_
46+
IMPORTANT: _Make sure you include `xmlns:mda="@nativescript-community/ui-material-activityindicator"` on the Page element._
2947

30-
### XML
48+
#### XML
3149

3250
```XML
3351
<Page xmlns:mda="@nativescript-community/ui-material-activityindicator">
@@ -37,15 +55,17 @@ Be sure to run a new build after adding plugins to avoid any issues.
3755
</Page>
3856
```
3957

40-
### CSS
58+
#### CSS
4159

4260
```CSS
4361
mdcactivityindicator {
4462
color: #fff;
4563
}
4664
```
4765

48-
## NativeScript + Angular
66+
##
67+
68+
### NativeScript + Angular
4969

5070
```typescript
5171
import { NativeScriptMaterialActivityIndicatorModule } from "@nativescript-community/ui-material-activityindicator/angular";
@@ -63,7 +83,9 @@ import { NativeScriptMaterialActivityIndicatorModule } from "@nativescript-commu
6383
<MDActivityIndicator busy="true"></MDActivityIndicator>
6484
```
6585

66-
## NativeScript + Vue
86+
##
87+
88+
### NativeScript + Vue
6789

6890
```javascript
6991
import Vue from 'nativescript-vue';
@@ -76,6 +98,8 @@ Vue.use(ActivityIndicatorPlugin);
7698
<MDActivityIndicator busy="true"/>
7799
```
78100

79-
## Attributes
101+
## API
102+
103+
### Attributes
80104

81-
Inherite from Nativescript [Activity Indicator](https://docs.nativescript.org/ui/ns-ui-widgets/activity-indicator) so it already has all the same attributes
105+
Inherite from NativeScript [Activity Indicator](https://docs.nativescript.org/ui/ns-ui-widgets/activity-indicator) so it already has all the same attributes

‎packages/bottom-navigation/README.md

Lines changed: 47 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,45 @@
1-
[![npm](https://img.shields.io/npm/v/nativescript-material-bottom-navigation.svg)](https://www.npmjs.com/package/nativescript-material-bottom-navigation)
2-
[![npm](https://img.shields.io/npm/dt/nativescript-material-bottom-navigation.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-material-bottom-navigation)
3-
[![GitHub forks](https://img.shields.io/github/forks/Akylas/nativescript-material-components.svg)](https://github.com/Akylas/nativescript-material-components/network)
4-
[![GitHub stars](https://img.shields.io/github/stars/Akylas/nativescript-material-components.svg)](https://github.com/Akylas/nativescript-material-components/stargazers)
1+
# NativeScript Material Bottom navigation
2+
3+
Material Design's [Bottom navigation](https://material.io/components/bottom-navigation) component for NativeScript.
4+
5+
[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-bottom-navigation.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-bottom-navigation)
6+
[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-bottom-navigation.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-bottom-navigation)
7+
8+
## Contents
9+
10+
1. [Installation](#installation)
11+
2. [Changelog](#changelog)
12+
3. [FAQ](#faq)
13+
4. [Usage](#usage)
14+
- [Plain NativeScript](#plain-nativescript)
15+
- [Angular](#nativescript--angular)
16+
- [Vue](#nativescript--vue)
17+
5. [API](#api)
518

619
## Installation
720

8-
### Warning :warning: :warning:
9-
From 5.x using material component will break N tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either [bottomnavigationbar](https://www.npmjs.com/package/nativescript-material-bottomnavigationbar) (this one is the best choice, closest to material design) or [tabs](https://www.npmjs.com/package/nativescript-material-bottom-navigation) (clone of N one, but with a little less features)
21+
### :warning: Warning :warning:
22+
From NativeScript 5.x using this component will break the [NativeScript tab component](https://docs.nativescript.org/ui/components/tabs) on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either [bottomnavigationbar](https://www.npmjs.com/package/@nativescript-community/ui-material-bottomnavigationbar) (this one is the best choice, closest to material design) or [material-tabs](https://www.npmjs.com/package/@nativescript-community/ui-material-tabs) (clone of the NativeScript one, but with a little less features).
1023

11-
* `tns plugin add @nativescript-community/ui-material-bottom-navigation`
24+
##
1225

13-
Be sure to run a new build after adding plugins to avoid any issues.
26+
```bash
27+
ns plugin add @nativescript-community/ui-material-bottom-navigation
28+
```
1429

15-
---
30+
Be sure to run a new build after adding plugins to avoid any issues.
1631

17-
##### [Material Design Spec](https://material.io/design/components/bottom-navigation.html)
32+
## [Changelog](./CHANGELOG.md)
1833

19-
### Usage
34+
## [FAQ](../../README.md#faq)
2035

36+
## Usage
2137

22-
## Plain NativeScript
38+
### Plain NativeScript
2339

24-
<span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:mds="@nativescript-community/ui-material-bottom-navigation"` on the Page element_
40+
IMPORTANT: _Make sure you include `xmlns:mds="@nativescript-community/ui-material-bottom-navigation"` on the Page element._
2541

26-
### XML
42+
#### XML
2743

2844
```XML
2945
<Page xmlns:mdt="@nativescript-community/ui-material-bottom-navigation">
@@ -64,7 +80,7 @@ Be sure to run a new build after adding plugins to avoid any issues.
6480
</Page>
6581
```
6682

67-
### CSS
83+
#### CSS
6884

6985
```CSS
7086
MDBottomNavigation.bottom-nav {
@@ -98,7 +114,9 @@ MDBottomNavigation TabStrip {
98114
}
99115
```
100116

101-
## NativeScript + Angular
117+
##
118+
119+
### NativeScript + Angular
102120

103121
```typescript
104122
import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-slider/angular";
@@ -149,7 +167,9 @@ import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-mater
149167
</MDBottomNavigation>
150168
```
151169

152-
## NativeScript + Vue
170+
##
171+
172+
### NativeScript + Vue
153173

154174
```javascript
155175
import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';
@@ -194,7 +214,9 @@ Vue.use(BottomNavigation);
194214
</MDBottomNavigation>
195215
```
196216

197-
## Attributes
217+
## API
218+
219+
### Attributes
198220

199221
| Name |Type| Description|
200222
| ------------- |:-------------:| -----:|
@@ -206,11 +228,11 @@ Vue.use(BottomNavigation);
206228
|tabsPosition | "top", "bottom" | Gets or sets the position state of the Tabs. Default value: top|
207229
|iOSTabBarItemsAlignment | "leading", "justified", "center", "centerSelected" |iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified|
208230

209-
## Events
231+
### Events
210232

211-
|Name | Description|
212-
| ------------- |:-------------:| -----:|
213-
|selectedIndexChanged | Emitted when the selectedIndex property is changed.
214-
|loaded | Emitted when the view is loaded.
215-
|unloaded | Emitted when the view is unloaded.
216-
|layoutChanged | Emitted when the layout bounds of a view changes due to layout processing.
233+
| Name | Description |
234+
| ------------- | -----:|
235+
| selectedIndexChanged | Emitted when the selectedIndex property is changed. |
236+
| loaded | Emitted when the view is loaded. |
237+
| unloaded | Emitted when the view is unloaded. |
238+
| layoutChanged | Emitted when the layout bounds of a view changes due to layout processing. |

0 commit comments

Comments
 (0)