nativescript-community · farfromrefug · Feb 3, 2021 · Jan 27, 2021 · Jan 27, 2021 · Jan 27, 2021
diff --git a/README.md b/README.md
@@ -1,46 +1,62 @@
 # Nativescript Material Components
 
-[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
 
 Build beautiful, usable products using Material Components for NativeScript.
 
 ## Components
 
--   [Button](./packages/button/README.md)
--   [Floating Action Button](./packages/floatingactionbutton/README.md)
--   [TextField](./packages/textfield/README.md)
--   [TextView](./packages/textview/README.md)
--   [CardView](./packages/cardview/README.md)
--   [Slider](./packages/slider/README.md)
--   [Progress](./packages/progress/README.md)
--   [ActivityIndicator](./packages/activityindicator/README.md)
--   [Dialogs](./packages/dialogs/README.md)
--   [Bottom Sheets](./packages/bottomsheet/README.md)
--   [Ripple View](./packages/ripple/README.md)
--   [Snackbar](./packages/snackbar/README.md)
--   [Bottom Navigation Bar](./packages/bottomnavigationbar/README.md)
+| Name | README | npm | Material design |
+| :---: | :---: | :---: | :---: |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+| 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) |
+
+## 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.
 
+##
 
-## iOS latest versions
+**Q:** How to migrate to AndroidX with this plugin installed (Android only)?
 
-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'`.
+**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.
 
-## Android migration to AndroidX
+##
 
-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?
 
-## Contribution
+**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](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.
 
+##
+
+**Q:** How can I contribute?
+
+**A:**
 ```bash
 npm i
-npm run setup // this should happen for every typescript update
+npm run setup # this should happen for every typescript update
 npm run tsc
 npm run demo.ios
 npm run demo.android
 ```
-
-
diff --git a/packages/activityindicator/README.md b/packages/activityindicator/README.md
@@ -1,33 +1,51 @@
-[![npm](https://img.shields.io/npm/v/nativescript-material-activityindicator.svg)](https://www.npmjs.com/package/nativescript-material-activityindicator)
-[![npm](https://img.shields.io/npm/dt/nativescript-material-activityindicator.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-material-activityindicator)
-[![GitHub forks](https://img.shields.io/github/forks/Akylas/nativescript-material-components.svg)](https://github.com/Akylas/nativescript-material-components/network)
-[![GitHub stars](https://img.shields.io/github/stars/Akylas/nativescript-material-components.svg)](https://github.com/Akylas/nativescript-material-components/stargazers)
+# NativeScript Material Circular progress indicator
+
+Material Design's [Circular progress indicator](https://material.io/design/components/progress-indicators.html#circular-progress-indicators) component for NativeScript.
+
+[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-activityindicator.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-activityindicator)
+[![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)
+
+## Contents
+
+1. [Installation](#installation)
+2. [Changelog](#changelog)
+3. [FAQ](#faq)
+4.  [Usage](#usage)
+    - [Plain NativeScript](#plain-nativescript)
+    - [Angular](#nativescript--angular)
+    - [Vue](#nativescript--vue)
+5.  [API](#api)
 
 ## Installation
 
-For N 7.0
+For NativeScript 7.0+
 * `tns plugin add @nativescript-community/ui-material-activityindicator`
 
-For N 6.x
+##
+
+For NativeScript 6.x
 * `tns plugin add nativescript-material-activityindicator`
 
+##
+
 If using ```tns-core-modules```
 * `tns plugin add [email protected]`
 
-Be sure to run a new build after adding plugins to avoid any issues.
+##
 
----
+Be sure to run a new build after adding plugins to avoid any issues.
 
-##### [Material Design Spec](https://material.io/design/components/progress-indicators.html#circular-progress-indicators)
+## [Changelog](./CHANGELOG.md)
 
-### Usage
+## [FAQ](../../README.md#faq)
 
+## Usage
 
-## Plain NativeScript
+### Plain NativeScript
 
-<span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:mda="@nativescript-community/ui-material-activityindicator"` on the Page element_
+IMPORTANT: _Make sure you include `xmlns:mda="@nativescript-community/ui-material-activityindicator"` on the Page element._
 
-### XML
+#### XML
 
 ```XML
 <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.
 </Page>
 ```
 
-### CSS
+#### CSS
 
 ```CSS
 mdcactivityindicator {
     color: #fff;
 }
 ```
 
-## NativeScript + Angular
+##
+
+### NativeScript + Angular
 
 ```typescript
 import { NativeScriptMaterialActivityIndicatorModule } from "@nativescript-community/ui-material-activityindicator/angular";
@@ -63,7 +83,9 @@ import { NativeScriptMaterialActivityIndicatorModule } from "@nativescript-commu
 <MDActivityIndicator busy="true"></MDActivityIndicator>
 ```
 
-## NativeScript + Vue
+##
+
+### NativeScript + Vue
 
 ```javascript
 import Vue from 'nativescript-vue';
@@ -76,6 +98,8 @@ Vue.use(ActivityIndicatorPlugin);
 <MDActivityIndicator busy="true"/>
 ```
 
-## Attributes
+## API
+
+### Attributes
 
-Inherite from Nativescript [Activity Indicator](https://docs.nativescript.org/ui/ns-ui-widgets/activity-indicator) so it already has all the same attributes
+Inherite from NativeScript [Activity Indicator](https://docs.nativescript.org/ui/ns-ui-widgets/activity-indicator) so it already has all the same attributes
diff --git a/packages/bottom-navigation/README.md b/packages/bottom-navigation/README.md
@@ -1,29 +1,45 @@
-[![npm](https://img.shields.io/npm/v/nativescript-material-bottom-navigation.svg)](https://www.npmjs.com/package/nativescript-material-bottom-navigation)
-[![npm](https://img.shields.io/npm/dt/nativescript-material-bottom-navigation.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-material-bottom-navigation)
-[![GitHub forks](https://img.shields.io/github/forks/Akylas/nativescript-material-components.svg)](https://github.com/Akylas/nativescript-material-components/network)
-[![GitHub stars](https://img.shields.io/github/stars/Akylas/nativescript-material-components.svg)](https://github.com/Akylas/nativescript-material-components/stargazers)
+# NativeScript Material Bottom navigation
+
+Material Design's [Bottom navigation](https://material.io/components/bottom-navigation) component for NativeScript.
+
+[![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)
+[![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)
+
+## Contents
+
+1. [Installation](#installation)
+2. [Changelog](#changelog)
+3. [FAQ](#faq)
+4.  [Usage](#usage)
+    - [Plain NativeScript](#plain-nativescript)
+    - [Angular](#nativescript--angular)
+    - [Vue](#nativescript--vue)
+5.  [API](#api)
 
 ## Installation
 
-### Warning :warning: :warning: 
-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)
+### :warning: Warning :warning:
+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).
 
-* `tns plugin add @nativescript-community/ui-material-bottom-navigation`
+##
 
-Be sure to run a new build after adding plugins to avoid any issues.
+```bash
+ns plugin add @nativescript-community/ui-material-bottom-navigation
+```
 
----
+Be sure to run a new build after adding plugins to avoid any issues.
 
-##### [Material Design Spec](https://material.io/design/components/bottom-navigation.html)
+## [Changelog](./CHANGELOG.md)
 
-### Usage
+## [FAQ](../../README.md#faq)
 
+## Usage
 
-## Plain NativeScript
+### Plain NativeScript
 
-<span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:mds="@nativescript-community/ui-material-bottom-navigation"` on the Page element_
+IMPORTANT: _Make sure you include `xmlns:mds="@nativescript-community/ui-material-bottom-navigation"` on the Page element._
 
-### XML
+#### XML
 
 ```XML
 <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.
 </Page>
 ```
 
-### CSS
+#### CSS
 
 ```CSS
 MDBottomNavigation.bottom-nav {
@@ -98,7 +114,9 @@ MDBottomNavigation TabStrip {
 }
 ```
 
-## NativeScript + Angular
+##
+
+### NativeScript + Angular
 
 ```typescript
 import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-slider/angular";
@@ -149,7 +167,9 @@ import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-mater
     </MDBottomNavigation>
 ```
 
-## NativeScript + Vue
+##
+
+### NativeScript + Vue
 
 ```javascript
 import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';
@@ -194,7 +214,9 @@ Vue.use(BottomNavigation);
     </MDBottomNavigation>
 ```
 
-## Attributes
+## API
+
+### Attributes
 
 | Name |Type| Description|
 | ------------- |:-------------:| -----:|
@@ -206,11 +228,11 @@ Vue.use(BottomNavigation);
 |tabsPosition  |	"top", "bottom"  |	Gets or sets the position state of the Tabs. Default value: top|
 |iOSTabBarItemsAlignment  |	"leading", "justified", "center", "centerSelected" 	 |iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified|
 
-## Events
+### Events
 
-|Name |	Description|
-| ------------- |:-------------:| -----:|
-|selectedIndexChanged |	Emitted when the selectedIndex property is changed.
-|loaded |	Emitted when the view is loaded.
-|unloaded |	Emitted when the view is unloaded.
-|layoutChanged |	Emitted when the layout bounds of a view changes due to layout processing.
+| Name | Description |
+| ------------- | -----:|
+| selectedIndexChanged | Emitted when the selectedIndex property is changed. |
+| loaded |	Emitted when the view is loaded. |
+| unloaded | Emitted when the view is unloaded. |
+| layoutChanged | Emitted when the layout bounds of a view changes due to layout processing. |