{"id":15018565,"url":"https://github.com/nativescript-community/ui-material-components","last_synced_at":"2025-05-16T06:03:21.204Z","repository":{"id":37411698,"uuid":"141102478","full_name":"nativescript-community/ui-material-components","owner":"nativescript-community","description":"Monorepo that contains all of the NativeScript Material Design plugins.","archived":false,"fork":false,"pushed_at":"2025-02-20T15:32:24.000Z","size":22097,"stargazers_count":221,"open_issues_count":19,"forks_count":79,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-05-09T01:39:00.646Z","etag":null,"topics":["android","ios","material-components","nativescript"],"latest_commit_sha":null,"homepage":"https://nativescript-community.github.io/ui-material-components/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["farfromrefug"]}},"created_at":"2018-07-16T07:30:07.000Z","updated_at":"2025-04-02T07:00:43.000Z","dependencies_parsed_at":"2023-10-12T17:11:13.711Z","dependency_job_id":"a8de9c82-e77e-4aab-bacf-8cebf31bb466","html_url":"https://github.com/nativescript-community/ui-material-components","commit_stats":{"total_commits":2198,"total_committers":54,"mean_commits":40.7037037037037,"dds":0.3839854413102821,"last_synced_commit":"05198a2ef7593f196efb7f156566b021142fd1a1"},"previous_names":["akylas/nativescript-material-components"],"tags_count":389,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-material-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-material-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-material-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-material-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/ui-material-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478160,"owners_count":22077675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","material-components","nativescript"],"created_at":"2024-09-24T19:52:07.409Z","updated_at":"2025-05-16T06:03:21.150Z","avatar_url":"https://github.com/nativescript-community.png","language":"TypeScript","readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\r\n[](#nativescript-material-components)\r\n\r\n# Nativescript Material Components\n\n[![License: Apache 2.0](https://img.shields.io/badge/License-Apache%20v2-yellow.svg)](https://opensource.org/license/apache-2-0/)\n[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)\n[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/lerna-lite/lerna-lite)\n\nBuild beautiful, usable products using Material Components for NativeScript.\n\n\r\n[](#installation)\r\n\r\n## Installation\n\n### Android \nEnsure your Android Theme is inheriting from `MaterialComponents`.\nInside ```App_resources/android/res/values/styles.xml``` replace all occurences of ```Theme.AppCompat``` with ```Theme.MaterialComponents```\nYou can see an example in the demo-vue app.\n\n### Production build\nIf you are using proguard on Android build you need ensure some resource from this plugin are not minified. You need to add ` tools:keep=\"@layout/ns_*\"` as explained [here](https://developer.android.com/build/shrink-code#keep-resources)\n\n\r\n[](#theming)\r\n\r\n## Theming\nDefining the theme and the default colors must be done a bit differently on iOS and Android\n\n* **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)\n* **iOS**: You must set the colors programmatically at your app startup\n```typescript\nimport { themer } from '@nativescript-community/ui-material-core';\nif (global.isIOS) {\n    themer.setPrimaryColor('#bff937');\n    themer.setAccentColor('#ff8a39');\n    themer.setSecondaryColor('#a830d7');\n}\n```\n\n\r\n[](#mixins)\r\n\r\n## Mixins\nThrough 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.\n```typescript\nimport { installMixins } from '@nativescript-community/ui-material-core';\ninstallMixins();\n```\nThis monorepo contains multiple packages:\u003cbr\u003e\u003cbr\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003eactivityindicator\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-circular-progress-indicator)\r\n\r\n# NativeScript Material Circular progress indicator\n\nMaterial Design's [Circular progress indicator](https://material.io/design/components/progress-indicators.html#circular-progress-indicators) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-activityindicator.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-activityindicator)\n[![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)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4.  [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n    - [Angular](#nativescript--angular)\n    - [Vue](#nativescript--vue)\n5.  [API](#api)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor NativeScript 7.0+\n* `tns plugin add @nativescript-community/ui-material-activityindicator`\n\n##\n\nFor NativeScript 6.x\n* `tns plugin add nativescript-material-activityindicator`\n\n##\n\nIf using ```tns-core-modules```\n* `tns plugin add nativescript-material-activityindicator@2.5.4`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### Plain NativeScript\n\nIMPORTANT: _Make sure you include `xmlns:mda=\"@nativescript-community/ui-material-activityindicator\"` on the Page element._\n\n#### XML\n\n```XML\n\u003cPage xmlns:mda=\"@nativescript-community/ui-material-activityindicator\"\u003e\n    \u003cStackLayout horizontalAlignment=\"center\"\u003e\n        \u003cmda:ActivityIndicator busy=\"true\"/\u003e\n    \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### CSS\n\n```CSS\nmdactivityindicator {\n    color: #fff;\n}\n```\n\n##\n\n### NativeScript + Angular\n\n```typescript\nimport { NativeScriptMaterialActivityIndicatorModule } from \"@nativescript-community/ui-material-activityindicator/angular\";\n\n@NgModule({\n    imports: [\n        NativeScriptMaterialActivityIndicatorModule,\n        ...\n    ],\n    ...\n})\n```\n\n```html\n\u003cMDActivityIndicator busy=\"true\"\u003e\u003c/MDActivityIndicator\u003e\n```\n\n##\n\n### NativeScript + Vue\n\n```javascript\nimport Vue from 'nativescript-vue';\nimport ActivityIndicatorPlugin from '@nativescript-community/ui-material-activityindicator/vue';\n\nVue.use(ActivityIndicatorPlugin);\n```\n\n```html\n\u003cMDActivityIndicator busy=\"true\"/\u003e\n```\n\n\r\n[](#api)\r\n\r\n## API\n\n### Attributes\n\nInherite from NativeScript [Activity Indicator](https://docs.nativescript.org/ui/ns-ui-widgets/activity-indicator) so it already has all the same attributes\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003ebottom-navigation\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-bottom-navigation)\r\n\r\n# NativeScript Material Bottom navigation\n\nMaterial Design's [Bottom navigation](https://material.io/components/bottom-navigation) component for NativeScript.\n\n[![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)\n[![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)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4.  [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n    - [Angular](#nativescript--angular)\n    - [Vue](#nativescript--vue)\n    - [React](#nativescript--react)\n5.  [API](#api)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\n```bash\nns plugin add @nativescript-community/ui-material-bottom-navigation\n```\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### Plain NativeScript\n\nIMPORTANT: _Make sure you include `xmlns:mds=\"@nativescript-community/ui-material-bottom-navigation\"` on the Page element._\n\n#### XML\n\n```XML\n\u003cPage xmlns:mdt=\"@nativescript-community/ui-material-bottom-navigation\"\u003e\n    \u003cmdt:BottomNavigation width=\"100%\" id=\"main-tabview\" class=\"main-tabview\"\n                selectedIndexChanged=\"onSelectedIndexChanged\"\n                iosOverflowSafeArea=\"true\" selectedIndex=\"0\" tabsPosition=\"bottom\" swipeEnabled=\"false\"\u003e\n            \u003c!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--\u003e\n            \u003cmdt:TabStrip backgroundColor=\"color('dark')\" color=\"color('blue')\"\u003e\n                \u003cmdt:TabStripItem  class=\"tab-item\"\u003e\n                    \u003cImage src=\"font://\u0026#xe1b0;\" class=\"fal\"\u003e\u003c/Image\u003e\n                    \u003cLabel text=\"Home\" ios:fontSize=\"10\" android:fontSize=\"12\"\u003e\u003c/Label\u003e\n                \u003c/mdt:TabStripItem\u003e\n                \u003cmdt:TabStripItem class=\"tab-item\"\u003e\n                    \u003cLabel text=\"L('search')\" ios:fontSize=\"10\" android:fontSize=\"12\"\u003e\u003c/Label\u003e\n                    \u003cImage src=\"font://\u0026#xe024;\" class=\"fal\"\u003e\u003c/Image\u003e\n                \u003c/mdt:TabStripItem\u003e\n                \u003cmdt:TabStripItem  class=\"tab-item\"\u003e\n                    \u003cLabel text=\"L('trips')\" ios:fontSize=\"10\" android:fontSize=\"12\"\u003e\u003c/Label\u003e\n                    \u003cImage src=\"font://\u0026#xf03a;\" class=\"fal\"\u003e\u003c/Image\u003e\n                \u003c/mdt:TabStripItem\u003e\n                \u003cmdt:TabStripItem class=\"tab-item\"\u003e\n                    \u003cLabel text=\"L('inbox')\" ios:fontSize=\"10\" android:fontSize=\"12\"\u003e\u003c/Label\u003e\n                    \u003cImage src=\"font://\u0026#xf4b6;\" class=\"fal\" id=\"tab-inbox-icon-fal\"\u003e\u003c/Image\u003e\n                \u003c/mdt:TabStripItem\u003e\n            \u003c/mdt:TabStrip\u003e\n\n            \u003c!-- The number of TabContentItem components should corespond to the number of TabStripItem components --\u003e\n            \u003cmdt:TabContentItem\u003e\n                \u003cGridLayout\u003e\n                    \u003cLabel text=\"Home\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n                \u003c/GridLayout\u003e\n            \u003c/mdt:TabContentItem\u003e\n            \u003cmdt:TabContentItem\u003e\n                \u003cGridLayout\u003e\n                    \u003cLabel text=\"Search Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n                \u003c/GridLayout\u003e\n            \u003c/mdt:TabContentItem\u003e\n            \u003cmdt:TabContentItem\u003e\n                \u003cGridLayout\u003e\n                    \u003cLabel text=\"TRansactions\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n                \u003c/GridLayout\u003e\n            \u003c/mdt:TabContentItem\u003e\n            \u003cmdt:TabContentItem\u003e\n                \u003cGridLayout\u003e\n                    \u003cLabel text=\"Inbox\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n                \u003c/GridLayout\u003e\n            \u003c/mdt:TabContentItem\u003e\n        \u003c/mdt:BottomNavigation\u003e\n\u003c/Page\u003e\n```\n\n#### CSS\n\n```CSS\nBottomNavigation.bottom-nav {\n    background-color: orangered;\n    color: gold;\n    font-size: 18;\n}\n\nMDTabStripItem.tabstripitem-active {\n    background-color: teal;\n}\n\nMDTabStripItem.tabstripitem-active:active {\n    background-color: yellowgreen;\n}\n\nMDTabContentItem.first-tabcontent {\n    background-color: seashell;\n    color: olive;\n}\nMDTabContentItem.second-tabcontent {\n    background-color: slategray;\n    color: aquamarine;\n}\nMDTabContentItem.third-tabcontent {\n    background-color: blueviolet;\n    color: antiquewhite;\n}\nBottomNavigation TabStrip {\n    highlight-color: red;\n}\n```\n\n##\n\n### NativeScript + Angular\n\n```typescript\nimport { NativeScriptMaterialTabsModule } from \"@nativescript-community/ui-material-bottom-navigation/angular\";\n\n@NgModule({\n    imports: [\n        NativeScriptMaterialBottomNavigationModule,\n        ...\n    ],\n    ...\n})\n```\n\n```html\n    \u003cMDBottomNavigation selectedIndex=\"1\"\u003e\n        \u003c!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--\u003e\n        \u003cMDTabStrip\u003e\n            \u003cMDTabStripItem\u003e\n                \u003cLabel text=\"Home\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf015;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/MDTabStripItem\u003e\n            \u003cMDTabStripItem class=\"special\"\u003e\n                \u003cLabel text=\"Account\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf007;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/MDTabStripItem\u003e\n            \u003cMDTabStripItem class=\"special\"\u003e\n                \u003cLabel text=\"Search\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf00e;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/MDTabStripItem\u003e\n        \u003c/MDTabStrip\u003e\n\n        \u003c!-- The number of TabContentItem components should corespond to the number of TabStripItem components --\u003e\n        \u003cMDTabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Home Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/MDTabContentItem\u003e\n        \u003cMDTabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Account Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/MDTabContentItem\u003e\n        \u003cMDTabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Search Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/MDTabContentItem\u003e\n    \u003c/MDBottomNavigation\u003e\n```\n\n##\n\n### NativeScript + Vue\n\n```javascript\nimport BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';\n\nVue.use(BottomNavigation);\n```\n\n```html\n\u003cMDBottomNavigation selectedIndex=\"1\"\u003e\n        \u003c!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--\u003e\n        \u003cMDTabStrip\u003e\n            \u003cMDTabStripItem\u003e\n                \u003cLabel text=\"Home\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf015;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/MDTabStripItem\u003e\n            \u003cMDTabStripItem class=\"special\"\u003e\n                \u003cLabel text=\"Account\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf007;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/MDTabStripItem\u003e\n            \u003cMDTabStripItem class=\"special\"\u003e\n                \u003cLabel text=\"Search\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf00e;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/MDTabStripItem\u003e\n        \u003c/MDTabStrip\u003e\n\n        \u003c!-- The number of TabContentItem components should corespond to the number of TabStripItem components --\u003e\n        \u003cMDTabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Home Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/MDTabContentItem\u003e\n        \u003cMDTabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Account Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/MDTabContentItem\u003e\n        \u003cMDTabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Search Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/MDTabContentItem\u003e\n    \u003c/MDBottomNavigation\u003e\n```\n\n##\n\n### NativeScript + React\n\nFirst, register the component before any of your React NativeScript app renders. A good place to put this code is in your entrypoint file (which may be called `src/app.ts` or similar), before the `ReactNativeScript.start` function is called. Here's how to install it:\n\n```ts\nimport { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react';\nimport { registerBottomNavigation } from '@nativescript-community/ui-material-bottom-navigation/react';\n\nregisterTabNavigationBase();\nregisterBottomNavigation();\n```\n\nWhen available (I've not implemented it at the time of writing, but intend to in time), it would be best to use this component via the `bottomNavigationNavigatorFactory()` API exported by [React NativeScript Navigation](https://github.com/shirakaba/react-nativescript-navigation/tree/master/react-nativescript-navigation), as it makes nested navigation easy, but here's how to use it directly:\n\n```tsx\nimport * as React from 'react';\n\nexport function BottomNavigation() {\n    const [selectedIndex, setSelectedIndex] = React.useState(0);\n\n    return (\n        \u003cbottomNavigation\n            selectedIndex={selectedIndex}\n            onSelectedIndexChanged={(args) =\u003e {\n                setSelectedIndex(args.newIndex);\n            }}\n            style={{ backgroundColor: 'orange' }}\n        \u003e\n            {/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}\n            \u003ctabStrip nodeRole=\"tabStrip\" style={{ backgroundColor: 'red' }}\u003e\n                \u003ctabStripItem nodeRole=\"items\"\u003e\n                    \u003clabel nodeRole=\"label\"\u003eHome\u003c/label\u003e\n                    \u003cimage nodeRole=\"image\" src=\"font://\u0026#xf015;\" className=\"fas\" /\u003e\n                \u003c/tabStripItem\u003e\n                \u003ctabStripItem nodeRole=\"items\"\u003e\n                    \u003clabel nodeRole=\"label\"\u003eAccount\u003c/label\u003e\n                    \u003cimage nodeRole=\"image\" src=\"font://\u0026#xf007;\" className=\"fas\" /\u003e\n                \u003c/tabStripItem\u003e\n                \u003ctabStripItem nodeRole=\"items\"\u003e\n                    \u003clabel nodeRole=\"label\"\u003eSearch\u003c/label\u003e\n                    \u003cimage nodeRole=\"image\" src=\"font://\u0026#xf00e;\" className=\"fas\" /\u003e\n                \u003c/tabStripItem\u003e\n            \u003c/tabStrip\u003e\n\n            {/* The number of tabContentItem components should corespond to the number of TabStripItem components */}\n            \u003ctabContentItem nodeRole=\"items\"\u003e\n                \u003cgridLayout style={{ backgroundColor: 'blue' }}\u003e\n                    \u003clabel style={{ color: 'white' }}\u003eHome Page\u003c/label\u003e\n                \u003c/gridLayout\u003e\n            \u003c/tabContentItem\u003e\n            \u003ctabContentItem nodeRole=\"items\"\u003e\n                \u003cgridLayout style={{ backgroundColor: 'cyan' }}\u003e\n                    \u003clabel style={{ color: 'black' }}\u003eAccount Page\u003c/label\u003e\n                \u003c/gridLayout\u003e\n            \u003c/tabContentItem\u003e\n            \u003ctabContentItem nodeRole=\"items\"\u003e\n                \u003cgridLayout style={{ backgroundColor: 'magenta' }}\u003e\n                    \u003clabel style={{ color: 'black' }}\u003eSearch Page\u003c/label\u003e\n                \u003c/gridLayout\u003e\n            \u003c/tabContentItem\u003e\n        \u003c/bottomNavigation\u003e\n    );\n}\n```\n\n**Troubleshooting**\n\nIf you see an error like this when writing e.g. `\u003cbottomNavigation\u003e` into your JSX:\n\n\u003e Property 'bottomNavigation' does not exist on type 'JSX.IntrinsicElements'.ts(2339)\n\nMake sure that you have:\n\n1. Installed the `react-nativescript` npm module.\n2. Installed the `@types/react` npm module, strictly with the exact version provided in the [React NativeScript starter template](https://github.com/NativeScript/nativescript-app-templates/tree/master/packages/template-blank-react).\n3. Run the postinstall script that comes with the React NativeScript template – `npm run postinstall` – to patch `@types/react`.\n4. Registered the component as described above (i.e. import and run the `registerTabNavigationBase()` and `registerBottomNavigation()` methods).\n5. If using Visual Studio Code, option-click the import `@nativescript-community/ui-material-bottom-navigation/react` to jump to the file; opening the file will force it to load its provided typings.\n\n\r\n[](#api)\r\n\r\n## API\n\n### Attributes\n\n| Name |Type| Description|\n| ------------- |:-------------:| -----:|\n| items  |\tArray\u003cMDTabContentItem\u003e | \tGets or sets the items of the BottomNavigation.|\n|selectedIndex  |\tnumber | \tGets or sets the selectedIndex of the BottomNavigation.|\n|swipeEnabled  |\tboolean  |\tGets or sets the swipe enabled state of the Tabs.|\n|offscreenTabLimit  |\tnumber  |\tGets or sets the number of offscreen preloaded tabs of the Tabs.|\n|tabStrip \t |TabStrip  |\tGets or sets the tab strip of the BottomNavigation.|\n|tabsPosition  |\t\"top\", \"bottom\"  |\tGets or sets the position state of the Tabs. Default value: top|\n|iOSTabBarItemsAlignment  |\t\"leading\", \"justified\", \"center\", \"centerSelected\" \t |iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified|\n\n### Events\n\n| Name | Description |\n| ------------- | -----:|\n| selectedIndexChanged | Emitted when the selectedIndex property is changed. |\n| loaded |\tEmitted when the view is loaded. |\n| unloaded | Emitted when the view is unloaded. |\n| layoutChanged | Emitted when the layout bounds of a view changes due to layout processing. |\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003ebottomnavigationbar\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-bottom-navigation-bar)\r\n\r\n# NativeScript Material Bottom navigation bar\n\nMaterial Design's [Bottom navigation](https://material.io/components/bottom-navigation) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-bottomnavigationbar.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-bottomnavigationbar) [![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-bottomnavigationbar.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-bottomnavigationbar)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4.  [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n    - [Angular](#angular)\n    - [Vue](#vue)\n    - [CSS Styling](#css-styling)\n5.  [API](#api)\n    - [BottomNavigationBar](#bottom-navigation-bar)\n    - [BottomNavigationTab](#bottom-navigation-tab)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor NativeScript 7.0+\n* `tns plugin add @nativescript-community/ui-material-bottomnavigationbar`\n\nFor NativeScript 6.x\n* `tns plugin add nativescript-material-bottomnavigationbar`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\nBefore start using the plugin you need to add the icons for Android \u0026 iOS in your `App_Resources` directory.\n\n### Plain NativeScript\n\nYou can set the tabs using the `tabs` property\n\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\"\n      xmlns:mdc=\"@nativescript-community/ui-material-bottomnavigationbar\"\n      loaded=\"pageLoaded\"\n      class=\"page\"\u003e\n    \u003cGridLayout rows=\"*, auto\"\u003e\n        \u003cStackLayout row=\"0\"\u003e\n            \u003cLabel text=\"content\"\u003e\u003c/Label\u003e\n        \u003c/StackLayout\u003e\n        \u003cmdc:BottomNavigationBar\n          tabs=\"tabs\"\n          activeColor=\"green\"\n          inactiveColor=\"red\"\n          backgroundColor=\"black\"\n          tabSelected=\"tabSelected\"\n          row=\"1\"\n        \u003e\u003c/mdc:BottomNavigationBar\u003e\n    \u003c/GridLayout\u003e\n\u003c/Page\u003e\n```\n\n```typescript\nimport { EventData } from '@nativescript/core/data/observable';\nimport { Page } from '@nativescript/core/ui/page';\nimport { BottomNavigationTab, TabSelectedEventData } from '@nativescript-community/ui-material-bottomnavigationbar';\n\n// Event handler for Page 'loaded' event attached in main-page.xml\nexport function pageLoaded(args: EventData) {\n    // Get the event sender\n    let page = \u003cPage\u003eargs.object;\n    page.bindingContext = {\n        tabs: [\n            new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }),\n            new BottomNavigationTab({\n                title: 'Second',\n                icon: 'res://ic_view_list',\n                isSelectable: false\n            }),\n            new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' })\n        ]\n    };\n}\n\nexport function tabSelected(args: TabSelectedEventData) {\n    console.log('tab selected ' + args.newIndex);\n}\n```\n\nor you can add the tabs directly in your xml view\n\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\"\n      xmlns:mdc=\"@nativescript-community/ui-material-bottomnavigationbar\"\n      loaded=\"pageLoaded\"\n      class=\"page\"\u003e\n    \u003cGridLayout rows=\"*, auto\"\u003e\n        \u003cStackLayout row=\"0\"\u003e\n            \u003cLabel text=\"content\"\u003e\u003c/Label\u003e\n        \u003c/StackLayout\u003e\n        \u003cmdc:BottomNavigationBar\n          activeColor=\"green\"\n          inactiveColor=\"red\"\n          backgroundColor=\"black\"\n          tabSelected=\"tabSelected\"\n          row=\"1\"\n        \u003e\n          \u003cmdc:BottomNavigationTab title=\"First\" icon=\"res://ic_home\" /\u003e\n          \u003cmdc:BottomNavigationTab title=\"Second\" icon=\"res://ic_view_list\" isSelectable=\"false\" /\u003e\n          \u003cmdc:BottomNavigationTab title=\"Third\" icon=\"res://ic_menu\" /\u003e\n        \u003c/mdc:BottomNavigationBar\u003e\n    \u003c/GridLayout\u003e\n\u003c/Page\u003e\n```\n\n### Angular\n\nFirst you need to include the `NativeScriptMaterialBottomNavigationBarModule` in your `app.module.ts`\n\n```typescript\nimport { NativeScriptMaterialBottomNavigationBarModule} from \"@nativescript-community/ui-material-bottomnavigationbar/angular\";\n\n@NgModule({\n    imports: [\n        NativeScriptMaterialBottomNavigationBarModule\n    ],\n    ...\n})\n```\n\n```html\n\u003cGridLayout rows=\"*, auto\"\u003e\n    \u003cStackLayout row=\"0\"\u003e\n        \u003clabel text=\"content\"\u003e\u003c/label\u003e\n    \u003c/StackLayout\u003e\n    \u003cBottomNavigationBar\n        [tabs]=\"tabs\"\n        activeColor=\"red\"\n        inactiveColor=\"yellow\"\n        backgroundColor=\"black\"\n        (tabSelected)=\"onBottomNavigationTabSelected($event)\"\n        (tabPressed)=\"onBottomNavigationTabPressed($event)\"\n        row=\"1\"\n    \u003e\u003c/BottomNavigationBar\u003e\n\u003c/GridLayout\u003e\n```\n\nor you can declare the `BottomNavigationTab` in your html directly\n\n```html\n\u003cGridLayout rows=\"*, auto\"\u003e\n    \u003cStackLayout row=\"0\"\u003e\n        \u003clabel text=\"content\"\u003e\u003c/label\u003e\n    \u003c/StackLayout\u003e\n    \u003cBottomNavigationBar\n        activeColor=\"red\"\n        inactiveColor=\"yellow\"\n        backgroundColor=\"black\"\n        (tabSelected)=\"onBottomNavigationTabSelected($event)\"\n        (tabPressed)=\"onBottomNavigationTabPressed($event)\"\n        row=\"1\"\n    \u003e\n        \u003cBottomNavigationTab title=\"First\" icon=\"res://ic_home\"\u003e\u003c/BottomNavigationTab\u003e\n        \u003cBottomNavigationTab title=\"Second\" icon=\"res://ic_view_list\" [isSelectable]=\"false\"\u003e\u003c/BottomNavigationTab\u003e\n        \u003cBottomNavigationTab title=\"Third\" icon=\"res://ic_menu\"\u003e\u003c/BottomNavigationTab\u003e\n    \u003c/BottomNavigationBar\u003e\n\u003c/GridLayout\u003e\n```\n\n### Vue\n\nIf you want to use this plugin with Vue, do this in your `app.js` or `main.js`:\n\n```javascript\nimport BottomNavigationBar from '@nativescript-community/ui-material-bottomnavigationbar/vue';\n\nVue.use(BottomNavigationBar);\n```\n\nThis will install and register `BottomNavigationBar` and `BottomNavigationTab` components to your `Vue` instance and now you can use the plugin as follows:\n\n```html\n\u003cGridLayout rows=\"*, auto\"\u003e\n    \u003cStackLayout row=\"0\"\u003e\n        \u003clabel text=\"content\"\u003e\u003c/label\u003e\n    \u003c/StackLayout\u003e\n    \u003cMDBottomNavigationBar activeColor=\"red\" inactiveColor=\"yellow\" backgroundColor=\"black\" @tabSelected=\"onBottomNavigationTabSelected\" row=\"1\"\u003e\n        \u003cMDBottomNavigationTab title=\"First\" icon=\"ic_home\" /\u003e\n        \u003cMDBottomNavigationTab title=\"Second\" icon=\"ic_view_list\" isSelectable=\"false\" /\u003e\n        \u003cMDBottomNavigationTab title=\"Third\" icon=\"ic_menu\" /\u003e\n    \u003c/MDBottomNavigationBar\u003e\n\u003c/GridLayout\u003e\n```\n\nYou can find more information of how to use nativescript plugins with Vue [Here!](https://nativescript-vue.org/en/docs/getting-started/nativescript-plugins/)\n\n### CSS Styling\n\nYou can also use your css file to set or change the `activeColor`, `inactiveColor` \u0026 `backgroundColor` of the Bottom Navigation Bar.\n\n```css\n.botom-nav {\n    active-color: green;\n    inactive-color: black;\n    background-color: blue;\n}\n```\n\n\r\n[](#api)\r\n\r\n## API\n\n-   **Properties (bindable):** Properties settable through XML/HTML\n-   **Properties (internal):** Properties accessible through JS/TS instance\n-   **Events:** Event properties settable thew XML/HTML\n\n### Bottom Navigation Bar\n\n#### Properties (bindable)\n\nProperties settable through XML/HTML\n\n| Property        | Required | Default                     | Type                         | Description                                             |\n| --------------- | -------- | --------------------------- | ---------------------------- | ------------------------------------------------------- |\n| tabs            | true     | []                          | `Array\u003cBottomNavigationTab\u003e` | Array containing the tabs for the BottomNavigationBar   |\n| titleVisibility | false    | `TitleVisibility.Selected`  | `TitleVisibility`            | Title Visibility for each BottomNavigationTab           |\n| activeColor     | false    | \"black\"                     | `String`                     | Color of the BottomNavigationTab when it's selected     |\n| inactiveColor   | false    | \"gray\"                      | `String`                     | Color of the BottomNavigationTab when it's not selected |\n| backgroundColor | false    | \"white\"                     | `String`                     | Color of the BottomNavigation background                |\n| badgeColor      | false    | \"red\"                       | `String`                     | Color of the BottomNavigationTab badge background       |\n| badgeTextColor  | false    | \"white\"                     | `String`                     | Color of the BottomNavigationTab badge text             |\n\n#### Properties (internal)\n\nProperties accessible through JS/TS instance\n\n| Property         | Default                     | Type                         | Description                                             |\n| ---------------- | --------------------------- | ---------------------------- | ------------------------------------------------------- |\n| items            | `[]`                        | `Array\u003cBottomNavigationTab\u003e` | Array containing the tabs for the BottomNavigationBar   |\n| selectedTabIndex | 0                           | `Number`                     | Index of the selected tab                               |\n| titleVisibility  | `TitleVisibility.Selected`  | `TitleVisibility`            | Title Visibility for each BottomNavigationTab           |\n| activeColor      | `new Color('black')`        | `Color`                      | Color of the BottomNavigationTab when it's selected     |\n| inactiveColor    | `new Color('gray')`         | `Color`                      | Color of the BottomNavigationTab when it's not selected |\n| backgroundColor  | `new Color('white')`        | `Color`                      | Color of the BottomNavigation background                |\n| badgeColor       | `new Color('red')`          | `Color`                      | Color of the BottomNavigationTab badge background       |\n| badgeTextColor   | `new Color('white')`        | `Color`                      | Color of the BottomNavigationTab badge text             |\n\n#### Events\n\nEvent properties settable thew XML/HTML\n\n| Name          | Type                                   | Description                                                              |\n| ------------- | -------------------------------------- | ------------------------------------------------------------------------ |\n| tabPressed    | `(args: TabPressedEventData): void`    | Function fired every time the user tap a tab with `isSelectable: false`  |\n| tabSelected   | `(args: TabSelectedEventData): void`   | Function fired every time the user select a new tab                      |\n| tabReselected | `(args: TabReselectedEventData): void` | Function fired every time the user select a tab that is already selected |\n\n#### Methods\n\nMethods accessible through JS/TS instance\n\n| Property                                   | Type   | Description                      |\n| ------------------------------------------ | ------ | -------------------------------- |\n| `selectTab(index: number)`                 | `void` | Select a tab programmatically    |\n| `showBadge(index: number, value?: number)` | `void` | Show a badge for an specific tab, if you want to show a badge as a red dot no value should be passed to the function |\n\n### Bottom Navigation Tab\n\n#### Properties (bindable)\n\nProperties settable through XML/HTML\n\n| Property     | Required | Default | Type      | Description                                 |\n| ------------ | -------- | ------- | --------- | ------------------------------------------- |\n| title        | true     | null    | `string`  | Title of the tab                            |\n| icon         | true     | null    | `string`  | Icon of the tab                             |\n| isSelectable | false    | true    | `boolean` | Determine if the tab can be selected or not |\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003ebottomsheet\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-bottom-sheet)\r\n\r\n# NativeScript Material Bottom sheet\n\nMaterial Design's [Bottom sheet](https://material.io/components/sheets-bottom) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-bottomsheet.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-bottomsheet)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-bottomsheet.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-bottomsheet)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4.  [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n    - [Angular](#nativescript--angular)\n    - [Vue](#nativescript--vue)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor NativeScript 7.0+\n* `tns plugin add @nativescript-community/ui-material-bottomsheet`\n\n##\n\nFor NativeScript 6.x\n* `tns plugin add nativescript-material-bottomsheet`\n\n##\n\nIf using ```tns-core-modules```\n* `tns plugin add nativescript-material-bottomsheet@2.5.4`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#api)\r\n\r\n## API\n\n```ts\nexport interface BottomSheetOptions {\n    view: string | ViewBase; \n    // View instance to be shown in bottom sheet. Or the name of the module to load starting from the application root.\n    context?: any; \n    // Any context you want to pass to the view shown in bottom sheet. This same context will be available in the arguments of the shownInBottomSheet event handler.\n    animated?: boolean; \n    // An optional parameter specifying whether to show the sheet view with animation.\n    dismissOnBackgroundTap?: boolean; \n    // An optional parameter specifying whether to dismiss the sheet when clicking on background.\n    dismissOnDraggingDownSheet?: boolean; \n    // An optional parameter specifying whether to disable dragging the sheet to dismiss.\n    dismissOnBackButton?: boolean; \n    // An optional parameter that specifies whether to close the sheet when pressing the back button.\n    closeCallback?: Function; \n    //  A function that will be called when the view is closed. Any arguments provided when calling shownInBottomSheet.closeCallback will be available here.\n    trackingScrollView?: string; \n    // optional id of the scroll view to track\n    transparent?: boolean; \n    // optional parameter to make the bottomsheet transparent\n    ignoreTopSafeArea?: boolean; \n    // optional ios parameter to top safe area. Default is true\n    ignoreBottomSafeArea?: boolean; \n    // optional ios parameter to bottom safe area. Default is false\n    disableDimBackground?: boolean; \n    // optional parameter to remove the dim background\n    skipCollapsedState?: boolean; \n    // optional Android parameter to skip midway state when view is greater than 50%. Default is false\n    peekHeight?: number; \n    // optional parameter to set the collapsed sheet height. To work on iOS you need to set trackingScrollView. Also ensure the scrollView is taking the full height of the bottomsheet content. Otherwise the \"full\" height wont be computed correctly\n    ignoreKeyboardHeight?: boolean; \n    //(iOS only) A Boolean value that controls whether the height of the keyboard should affect the bottom sheet's frame when the keyboard shows on the screen. (Default: true)\n    onChangeState?: onChangeStateBottomSheet; \n    // One works to be called on the scroll of the sheet. Parameters: state (CLOSED, DRAGGING, DRAGGING, COLLAPSED) and slideOffset is the new offset of this bottom sheet within [-1,1] range. Offset increases as this bottom sheet is moving upward. From 0 to 1 the sheet is between collapsed and expanded states and from -1 to 0 it is between hidden and collapsed states.\n    canTouchBehind?: boolean //(Android only) allows to interact with the screen behind the sheet. For it to work properly need dismissOnBackgroundTap set to true.\n}\n```\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### Plain NativeScript\n\nWe need to do some wiring when your app starts, so open `app.js` and add this before creating any View/App/Frame:\n\n#### JavaScript\n```js\nvar material = require(\"@nativescript-community/ui-material-bottomsheet\");\n\nmaterial.install();\n```\n\n#### TypeScript\n```ts\nimport { install } from \"@nativescript-community/ui-material-bottomsheet\";\ninstall();\n```\n\nUses the same kind of API as [NativeScript Modals](https://docs.nativescript.org/ui/modal-view).\n\n#### TS\n\n```typescript\nconst modalViewModulets = \"ns-ui-category/modal-view/basics/modal-ts-view-page\";\nexport function openBottomSheet(args) {\n    const mainView: Button = \u003cButton\u003eargs.object;\n    const context = { username: \"test_username\", password: \"test\" };\n    const fullscreen = true;\n    mainView.showBottomSheet({\n        view: modalViewModulets,\n        context,\n        closeCallback: (username, password) =\u003e {\n            bottom-sheet\n            alert(`Username: ${username} : Password: ${password}`);\n        },\n        fullscreen\n    });\n}\n\n```\n\n##\n\n### NativeScript + Vue 2\n```typescript\nimport Vue from 'nativescript-vue';\nimport BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';\nimport { install } from \"@nativescript-community/ui-material-bottomsheet\";\ninstall();\n\nVue.use(BottomSheetPlugin);\n```\nThen you can show a Vue component:\n```typescript \nimport MyComponent from 'MyComponent.vue';\n\n//inside another Vue component\nconst options: VueBottomSheetOptions = {\n    // props to be passed to MyComponent\n    props: {\n        someProp: true,\n        anotherProp: false\n    },\n    // listeners to be connected to MyComponent\n    on: {\n        someEvent: (value) =\u003e { console.log(value) }\n    }\n};\nthis.$showBottomSheet(MyComponent, options)\n```\n\n### NativeScript + Vue 3\n```typescript\nimport { createApp } from 'nativescript-vue';\nimport { BottomSheetPlugin } from '@nativescript-community/ui-material-bottomsheet/vue3';\nimport { install } from \"@nativescript-community/ui-material-bottomsheet\";\ninstall();\n\nconst app = createApp(...);\napp.use(BottomSheetPlugin);\n```\nThen you can show a Vue component:\n```typescript \nimport { useBottomSheet } from \"@nativescript-community/ui-material-bottomsheet/vue3\";\nimport MyComponent from 'MyComponent.vue';\n\n\nconst options: VueBottomSheetOptions = {\n    // props to be passed to MyComponent\n    props: {\n        someProp: true,\n        anotherProp: false\n    },\n    // listeners to be connected to MyComponent\n    on: {\n        someEvent: (value) =\u003e { console.log(value) }\n    }\n};\n\nconst { showBottomSheet, closeBottomSheet } = useBottomSheet()\n\nshowBottomSheet(MyComponent, options);\ncloseBottomSheet();\n```\n\n##\n\n### NativeScript + Angular\nFirst you need to include the `NativeScriptMaterialBottomSheetModule` in your `app.module.ts`\n\n```typescript\nimport { NativeScriptMaterialBottomSheetModule} from \"@nativescript-community/ui-material-bottomsheet/angular\";\n\n@NgModule({\n    imports: [\n        // This will call the install method and inject a global service called BottomSheetService\n        NativeScriptMaterialBottomSheetModule.forRoot()\n    ],\n    ...\n})\n```\nnow you can show your custom BottomSheet using the `BottomSheetService`, this service follows the same implementation as the `ModalService`\n\n#### ItemComponent\n```typescript\nimport { Component,  ViewContainerRef } from '@angular/core';\nimport { BottomSheetOptions, BottomSheetService } from '@nativescript-community/ui-material-bottomsheet/angular';\nimport { ShareOptionsComponent } from './share-options.component';\n\n@Component({\n    selector: 'ns-item',\n    templateUrl: './item.component.html',\n    moduleId: module.id\n})\nexport class ItemComponent {\n    constructor(\n        private bottomSheet: BottomSheetService, \n        private containerRef: ViewContainerRef,\n    ) {}\n\n    showOptions() {\n        const options: BottomSheetOptions = {\n            viewContainerRef: this.containerRef,\n            context: ['Facebook', 'Google', 'Twitter']\n        };\n\n        this.bottomSheet.show(ShareOptionsComponent, options).subscribe(result =\u003e {\n            console.log('Option selected:', result);\n        });\n    }\n}\n```\n#### ShareOptionsComponent\n```html\n\u003cListView\n    [items]=\"options\"\n    (itemTap)=\"onTap($event)\"\n    separatorColor=\"white\"\n    class=\"list-group\"\n    height=\"200\"\n\u003e\n    \u003cng-template let-option=\"item\"\u003e\n        \u003cLabel\n            class=\"list-group-item\"\n            [text]=\"option\"\n        \u003e\u003c/Label\u003e\n    \u003c/ng-template\u003e\n\u003c/ListView\u003e\n```\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { BottomSheetParams } from '@nativescript-community/ui-material-bottomsheet/angular';\nimport { ItemEventData } from '@nativescript/core/ui/list-view';\n\n@Component({\n    selector: 'ns-share-options',\n    templateUrl: 'share-options.component.html'\n})\nexport class ShareOptionsComponent implements OnInit {\n    options: string[];\n    \n    // The BottomSheetService injects the BottomSheetParams to the component\n    // so you can get the context and call the closeCallback method from the component displayed in your BottomSheet\n    constructor(private params: BottomSheetParams) {}\n\n    ngOnInit() {\n        this.options = this.params.context;\n    }\n\n    onTap({ index }: ItemEventData) {\n        this.params.closeCallback(this.options[index]);\n    }\n}\n```\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003ebutton\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-button)\r\n\r\n# NativeScript Material Button\n\nMaterial Design's [Button](https://material.io/components/buttons) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-button.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-button)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-button.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-button)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n- [NativeScript Material Button](#nativescript-material-button)\n  - [Contents](#contents)\n  - [Installation](#installation)\n  - [](#)\n  - [](#-1)\n  - [](#-2)\n  - [Changelog](#changelog)\n  - [FAQ](#faq)\n  - [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n      - [XML](#xml)\n      - [CSS](#css)\n  - [](#-3)\n    - [NativeScript + Angular](#nativescript--angular)\n  - [](#-4)\n    - [NativeScript + Vue](#nativescript--vue)\n  - [API](#api)\n    - [Attributes](#attributes)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor NativeScript 7.0+\n* `tns plugin add @nativescript-community/ui-material-button`\n\n##\n\nFor NativeScript 6.x\n* `tns plugin add nativescript-material-button`\n\n##\n\nIf using ```tns-core-modules```\n* `tns plugin add nativescript-material-button@2.5.4`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### Plain NativeScript\n\n\u003cspan style=\"color:red\"\u003eIMPORTANT: \u003c/span\u003e_Make sure you include `xmlns:mdb=\"@nativescript-community/ui-material-button\"` on the Page element_\n\n#### XML\n\n```XML\n\u003cPage xmlns:mdb=\"@nativescript-community/ui-material-button\"\u003e\n    \u003cStackLayout horizontalAlignment=\"center\"\u003e\n        \u003cmdb:Button text=\"raised button\"/\u003e\n        \u003cmdb:Button variant=\"flat\" text=\"flat button\"/\u003e\n        \u003cmdb:Button variant=\"text\" text=\"text button\"/\u003e\n        \u003cmdb:Button elevation=\"5\" rippleColor=\"red\" text=\"raised custom button\"/\u003e\n   \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### CSS\n\n```CSS\nmdbutton {\n    ripple-color: blue;\n    elevation: 4;\n}\n```\n\n##\n\n### NativeScript + Angular\n\n```typescript\nimport { NativeScriptMaterialButtonModule } from \"@nativescript-community/ui-material-button/angular\";\n\n@NgModule({\n    imports: [\n        NativeScriptMaterialButtonModule,\n        ...\n    ],\n    ...\n})\n```\n\n```html\n\u003cMDButton rippleColor=\"blue\" text=\"text button\"\u003e\u003c/MDButton\u003e\n```\n\n##\n\n### NativeScript + Vue\n\n```javascript\nimport Vue from 'nativescript-vue';\nimport ButtonPlugin from '@nativescript-community/ui-material-button/vue';\n\nVue.use(ButtonPlugin);\n```\n\n```html\n\u003cMDButton rippleColor=\"blue\" text=\"text button\"/\u003e\n```\n\n\r\n[](#api)\r\n\r\n## API\n\n### Attributes\n\nInherite from NativeScript [Button](https://docs.nativescript.org/ui/ns-ui-widgets/button) so it already has all the same attributes.\n\n* **elevation** _optional_\n\nAn attribute to set the elevation of the button. This will increase the 'drop-shadow' of the button.\n\n* **variant** _optional_\n\nAn attribute to set the variant of the button. Can be ```flat``` or ```text```. No value means raised button\n\n* **rippleColor** _optional_\n\nAn attribute to set the ripple color of the button.\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003ecardview\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-card)\r\n\r\n# NativeScript Material Card\n\nMaterial Design's [Card](https://material.io/components/cards) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-cardview.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-cardview)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-cardview.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-cardview)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4.  [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n    - [Angular](#nativescript--angular)\n    - [Vue](#nativescript--vue)\n5.  [API](#api)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor N 7.0\n* `tns plugin add @nativescript-community/ui-material-cardview`\n\n##\n\nFor N 6.x\n* `tns plugin add nativescript-material-cardview`\n\n##\n\nIf using ```tns-core-modules```\n* `tns plugin add nativescript-material-cardview@2.5.4`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### Plain NativeScript\n\n\u003cspan style=\"color:red\"\u003eIMPORTANT: \u003c/span\u003e_Make sure you include `xmlns:mdc=\"@nativescript-community/ui-material-cardview\"` on the Page element_\n\n#### XML\n\n```XML\n\u003cPage xmlns:mdc=\"@nativescript-community/ui-material-cardview\"\u003e\n    \u003cStackLayout horizontalAlignment=\"center\"\u003e\n        \u003cmdc:CardView width=\"100\" height=\"100\"/\u003e\n        \u003cmdc:CardView elevation=\"5\" rippleColor=\"red\"  width=\"100\" height=\"100\"/\u003e\n   \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### CSS\n\n```CSS\nmdcardview {\n    ripple-color: blue;\n    elevation: 4;\n}\n```\n\n##\n\n### NativeScript + Angular\n\n```typescript\nimport { NativeScriptMaterialCardViewModule } from \"@nativescript-community/ui-material-cardview/angular\";\n\n@NgModule({\n    imports: [\n        NativeScriptMaterialCardViewModule,\n        ...\n    ],\n    ...\n})\n```\n\n```html\n\u003cMDCardView rippleColor=\"blue\"  width=\"100\" height=\"100\"\u003e\u003c/MDCardView\u003e\n```\n\n##\n\n### NativeScript + Vue\n\n```javascript\nimport Vue from 'nativescript-vue';\nimport CardViewPlugin from '@nativescript-community/ui-material-cardview/vue';\n\nVue.use(CardViewPlugin);\n```\n\n```html\n\u003cMDCardView rippleColor=\"blue\"  width=\"100\" height=\"100\"/\u003e\n```\n\n\r\n[](#api)\r\n\r\n## API\n\n### Attributes\n\nInherite from NativeScript [StackLayout](https://docs.nativescript.org/ui/layouts/layout-containers#stacklayout-properties)\n\n* **elevation** _optional_\n\nAn attribute to set the elevation of the cardview. This will increase the 'drop-shadow' of the cardview.\n\n* **rippleColor** _optional_\n\nAn attribute to set the ripple color of the cardview.\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003ecore\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-core)\r\n\r\n# Nativescript Material Core\n\n[npm-url]:https://npmjs.org/package/nativescript-material-components\n\nCore module for all Nativescript material components\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003ecore-tabs\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-core)\r\n\r\n# Nativescript Material Core\n\n[npm-url]:https://npmjs.org/package/nativescript-material-components\n\nCore module for all Nativescript material components\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003edialogs\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-dialogs)\r\n\r\n# NativeScript Material Dialogs\n\nMaterial Design's [Dialogs](https://material.io/components/dialogs) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-dialogs.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-dialogs)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-dialogs.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-dialogs)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4. [Usage](#usage)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor NativeScript 7.0+\n* `tns plugin add @nativescript-community/ui-material-dialogs`\n\n##\n\nFor NativeScript 6.x\n* `tns plugin add nativescript-material-dialogs`\n\n##\n\nIf using ```tns-core-modules```\n* `tns plugin add nativescript-material-dialogs@2.5.4`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\nUses the same API as [NativeScript Dialogs](https://docs.nativescript.org/ui/dialogs).\n\nAdds one option for `alert`:\n* `view` : can be a NativeScript View or a path to to XML component. The custom view will be added to the dialog. Possibilities become endless.\n\n##\n\n### TS\n\n```typescript\nimport { login, alert, prompt } from \"@nativescript-community/ui-material-dialogs\";\n\nalert(\"Your message\").then(()=\u003e {\n    console.log(\"Dialog closed!\");\n});\n\n```\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003efloatingactionbutton\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-floating-action-button)\r\n\r\n# NativeScript Material Floating action button\n\nMaterial Design's [Floating action button](https://material.io/components/buttons-floating-action-button) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-floatingactionbutton.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-floatingactionbutton)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-floatingactionbutton.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-floatingactionbutton)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4.  [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n    - [Angular](#nativescript--angular)\n    - [Vue](#nativescript--vue)\n5.  [API](#api)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor NativeScript 7.0+\n* `tns plugin add @nativescript-community/ui-material-floatingactionbutton`\n\n##\n\nFor NativeScript 6.x\n* `tns plugin add nativescript-material-floatingactionbutton`\n\n##\n\nIf using ```tns-core-modules```\n* `tns plugin add nativescript-material-floatingactionbutton@2.5.4`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### Plain NativeScript\n\n\u003cspan style=\"color:red\"\u003eIMPORTANT: \u003c/span\u003e_Make sure you include `xmlns:mdf=\"@nativescript-community/ui-material-floatingactionbutton\"` on the Page element_\n\n#### XML\n\n```XML\n\u003cPage xmlns:mdf=\"@nativescript-community/ui-material-floatingactionbutton\"\u003e\n    \u003cStackLayout horizontalAlignment=\"center\"\u003e\n        \u003cmdf:FloatingActionButton src=\"res://ic_action_add\"/\u003e\n        \u003cmdf:FloatingActionButton elevation=\"5\" src=\"res://ic_action_add\"/\u003e\n   \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### CSS\n\n```CSS\nmdfloatingactionbutton {\n    ripple-color: blue;\n    elevation: 4;\n}\n```\n\n##\n\n### NativeScript + Angular\n\n```typescript\nimport { registerElement } from '@nativescript/angular/element-registry';\nimport { FloatingActionButton } from '@nativescript-community/ui-material-floatingactionbutton';\nregisterElement('MDFloatingActionButton', () =\u003e FloatingActionButton);\n```\n\n```html\n\u003cMDFloatingActionButton rippleColor=\"blue\" src=\"res://ic_action_add\"\u003e\u003c/MDFloatingActionButton\u003e\n```\n\n##\n\n### NativeScript + Vue\n\n```javascript\nimport Vue from 'nativescript-vue';\nimport FloatingActionButtonPlugin from '@nativescript-community/ui-material-floatingactionbutton/vue';\n\nVue.use(FloatingActionButtonPlugin);\n```\n\n```html\n\u003cMDFloatingActionButton rippleColor=\"blue\" src=\"res://ic_action_add\"/\u003e\n```\n\n\r\n[](#api)\r\n\r\n## API\n\n### Attributes\n\nInherite from NativeScript [Button](https://docs.nativescript.org/ui/ns-ui-widgets/button) so it already has all the same attributes.\n\n* **src** _optional_\n\nAn attribute to set the floatingactionbutton icon. For now FAB only support images as icon\n\n* **elevation** _optional_\n\nAn attribute to set the elevation of the floatingactionbutton. This will increase the 'drop-shadow' of the floatingactionbutton.\n\n* **rippleColor** _optional_\n\nAn attribute to set the ripple color of the floatingactionbutton.\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003eprogress\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-linear-progress-indicator)\r\n\r\n# NativeScript Material Linear progress indicator\n\nMaterial Design's [Linear progress indicator](https://material.io/components/progress-indicators#linear-progress-indicators) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-progress.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-progress)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-progress.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-progress)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4.  [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n    - [Angular](#nativescript--angular)\n    - [Vue](#nativescript--vue)\n5.  [API](#api)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor NativeScript 7.0+\n* `tns plugin add @nativescript-community/ui-material-progress`\n\n##\n\nFor NativeScript 6.x\n* `tns plugin add nativescript-material-progress`\n\n##\n\nIf using ```tns-core-modules```\n* `tns plugin add nativescript-material-progress@2.5.4`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### Plain NativeScript\n\n\u003cspan style=\"color:red\"\u003eIMPORTANT: \u003c/span\u003e_Make sure you include `xmlns:mdp=\"@nativescript-community/ui-material-progress\"` on the Page element_\n\n#### XML\n\n```XML\n\u003cPage xmlns:mdp=\"@nativescript-community/ui-material-progress\"\u003e\n    \u003cStackLayout horizontalAlignment=\"center\"\u003e\n        \u003cmdp:Progress value=\"50\" maxValue=\"100\"/\u003e\n   \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### CSS\n\n```CSS\nmdprogress {\n    ripple-color: blue;\n    elevation: 4;\n}\n```\n\n##\n\n### NativeScript + Angular\n\n```typescript\nimport { NativeScriptMaterialProgressModule } from \"@nativescript-community/ui-material-progress/angular\";\n\n@NgModule({\n    imports: [\n        NativeScriptMaterialProgressModule,\n        ...\n    ],\n    ...\n})\n```\n\n```html\n\u003cMDProgress v-model=\"value\" maxValue=\"100\"\u003e\u003c/MDProgress\u003e\n```\n\n##\n\n### NativeScript + Vue\n\n```typescript\nimport ProgressPlugin from '@nativescript-community/ui-material-progress/vue';\n\nVue.use(ProgressPlugin);\n```\n\n```html\n\u003cMDProgress value=\"50\" maxValue=\"100\"\u003e\u003c/MDProgress\u003e\n```\n\n\r\n[](#api)\r\n\r\n## API\n\n### Attributes\n\nInherite from NativeScript [Progress](https://docs.nativescript.org/ui/components/progress) so it already has all the same attributes.\n\n* **elevation** _optional_\n\nAn attribute to set the elevation of the progress. This will increase the 'drop-shadow' of the progress.\n\n* **rippleColor** _optional_\n\nAn attribute to set the ripple color of the progress.\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003eripple\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-ripple)\r\n\r\n# NativeScript Material Ripple\n\nMaterial Design's [Ripple](https://material.io/design/interaction/states.html#pressed) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-ripple.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-ripple)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-ripple.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-ripple)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4.  [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n    - [Angular](#nativescript--angular)\n    - [Vue](#nativescript--vue)\n5.  [API](#api)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor NativeScript 7.0+\n* `tns plugin add @nativescript-community/ui-material-ripple`\n\n##\n\nFor NativeScript 6.x\n* `tns plugin add nativescript-material-ripple`\n\n##\n\nIf using ```tns-core-modules```\n* `tns plugin add nativescript-material-ripple@2.5.4`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### Plain NativeScript\n\n\u003cspan style=\"color:red\"\u003eIMPORTANT: \u003c/span\u003e_Make sure you include `xmlns:mdr=\"@nativescript-community/ui-material-ripple\"` on the Page element_\n\n#### XML\n\n```XML\n\u003cPage xmlns:mdr=\"@nativescript-community/ui-material-ripple\"\u003e\n    \u003cStackLayout horizontalAlignment=\"center\"\u003e\n        \u003cmdr:Ripple rippleColor=\"green\" width=\"100\" height=\"100\" /\u003e\n   \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### CSS\n\n```CSS\nmdripple {\n    ripple-color: blue;\n}\n```\n\n##\n\n### NativeScript + Angular\n\n```typescript\nimport { NativeScriptMaterialRippleModule } from \"@nativescript-community/ui-material-ripple/angular\";\n\n@NgModule({\n    imports: [\n        NativeScriptMaterialRippleModule,\n        ...\n    ],\n    ...\n})\n```\n\n```html\n\u003cMDRipple rippleColor=\"green\" width=\"100\" height=\"100\"\u003e\u003c/MDRipple\u003e\n```\n\n##\n\n### NativeScript + Vue\n\n```javascript\nimport Vue from 'nativescript-vue';\nimport RipplePlugin from '@nativescript-community/ui-material-ripple/vue';\n\nVue.use(RipplePlugin);\n```\n\n```html\n\u003cMDRipple rippleColor=\"green\" width=\"100\" height=\"100\"/\u003e\n```\n\n\r\n[](#api)\r\n\r\n## API\n\n### Attributes\n\nInherite from NativeScript [StackLayout](https://docs.nativescript.org/ui/layouts/layout-containers#stacklayout-properties).\n\n* **rippleColor** _optional_\n\nAn attribute to set the ripple color of the ripple.\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003eslider\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-slider)\r\n\r\n# NativeScript Material Slider\n\nMaterial Design's [Slider](https://material.io/components/sliders) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-slider.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-slider)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-slider.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-slider)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4.  [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n    - [Angular](#nativescript--angular)\n    - [Vue](#nativescript--vue)\n5.  [API](#api)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor NativeScript 7.0+\n* `tns plugin add @nativescript-community/ui-material-slider`\n\n##\n\nFor NativeScript 6.x\n* `tns plugin add nativescript-material-slider`\n\n##\n\nIf using ```tns-core-modules```\n* `tns plugin add nativescript-material-slider@2.5.4`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### Plain NativeScript\n\nIMPORTANT: _Make sure you include `xmlns:mds=\"@nativescript-community/ui-material-slider\"` on the Page element._\n\n#### XML\n\n```XML\n\u003cPage xmlns:mds=\"@nativescript-community/ui-material-slider\"\u003e\n    \u003cStackLayout horizontalAlignment=\"center\"\u003e\n        \u003cmds:Slider value=\"50\" minValue=\"0\" maxValue=\"100\" /\u003e\n   \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### CSS\n\n```CSS\nmdslider {\n    ripple-color: blue;\n    elevation: 4;\n}\n```\n\n##\n\n### NativeScript + Angular\n\n```typescript\nimport { NativeScriptMaterialSliderModule } from \"@nativescript-community/ui-material-slider/angular\";\n\n@NgModule({\n    imports: [\n        NativeScriptMaterialSliderModule,\n        ...\n    ],\n    ...\n})\n```\n\n```html\n\u003cMDSlider value=\"50\" minValue=\"0\" maxValue=\"100\"\u003e\u003c/MDSlider\u003e\n```\n\n##\n\n### NativeScript + Vue\n\n```javascript\nimport SliderPlugin from '@nativescript-community/ui-material-slider/vue';\n\nVue.use(SliderPlugin);\n```\n\n```html\n\u003cMDSlider value=\"50\" minValue=\"0\" maxValue=\"100\" @valueChange=\"onValueChanged\"/\u003e\n```\n\nOr you can bind the value to some instance data using the `v-model` directive:\n\n```html\n\u003cMDSlider v-model=\"value\" minValue=\"0\" maxValue=\"100\"/\u003e\n```\n\n\r\n[](#api)\r\n\r\n## API\n\n### Attributes\n\nInherite from NativeScript [Slider](https://docs.nativescript.org/ui/ns-ui-widgets/slider) so it already has all the same attributes.\n\n- **stepSize** _optional_\n  - An attribute to set the step size of the slider. Without this attribute, it behaves as a **continuous slider**.\n\n- **elevation** _optional_\n  - An attribute to set the elevation of the slider. This will increase the 'drop-shadow' of the slider.\n\n- **rippleColor** _optional_\n  - An attribute to set the ripple color of the slider.\n\n- **trackFillColor** _optional_\n  - Sets the color of the filled track.\n  - Defaults to your theme's `colorPrimary`. \n\n- **trackBackgroundColor** _optional_\n  - Sets the color of the background track.\n\n- **thumbColor** _optional_\n  - Sets the color of the slider's thumb.\n  - Defaults to your theme's `colorPrimary`. \n\n\n\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003esnackbar\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-snackbar)\r\n\r\n# NativeScript Material Snackbar\n\nMaterial Design's [Snackbar](https://material.io/components/snackbars) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-snackbar.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-snackbar)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-snackbar.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-snackbar)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4. [Usage](#usage)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor NativeScript 7.0+\n* `tns plugin add @nativescript-community/ui-material-snackbar`\n\n##\n\nFor NativeScript 6.x\n* `tns plugin add nativescript-material-snackbar`\n\n##\n\nIf using ```tns-core-modules```\n* `tns plugin add nativescript-material-snackbar@2.5.4`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### TypeScript\n\n```typescript\nimport { SnackBar } from '@nativescript-community/ui-material-snackbar';\n\nconst snackbar = new SnackBar();\n\nexport function showSimpleSnackbar() {\n    snackbar.simple(`I'm a simple snackbar`).then(result =\u003e console.log('Simple Snackbar:', result));\n}\n\nexport function showActionSnackbar() {\n    snackbar\n        .action({\n            message: `I'm a snackbar with an action`,\n            actionText: 'Dismiss',\n            hideDelay: 2000\n        })\n        .then(result =\u003e console.log('Action Snackbar:', result));\n}\n\nexport function showColorfulSnackbar() {\n    snackbar\n        .action({\n            message: `I'm a colorful snackbar`,\n            textColor: 'blue',\n            actionTextColor: 'yellow',\n            backgroundColor: 'green',\n            actionText: 'Dismiss',\n            hideDelay: 2000\n        })\n        .then(result =\u003e console.log('Action Snackbar:', result));\n}\n\n```\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003espeeddial\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-speed-dial)\r\n\r\n# NativeScript Material Speed dial\n\nMaterial Design's [Speed dial](https://material.io/components/buttons-floating-action-button#types-of-transitions) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-speeddial.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-speeddial)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-speeddial.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-speeddial)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4. [Usage](#usage)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\n```bash\nns plugin add @nativescript-community/ui-material-speeddial\n```\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### NativeScript + Vue\n\n```javascript\nimport Vue from 'nativescript-vue';\nimport speeddialPlugin from '@nativescript-community/ui-material-speeddial/vue';\n\nVue.use(speeddialPlugin);\n```\n\n```html\n\u003cMDSpeedDial buttonFontSize=\"26\" text=\"mdi-one-up\"  buttonClass=\"mdi\" buttonBackgroundColor=\"yellow\" @tap=\"onTap\"\u003e\n    \u003cMDSpeedDialItem icon=\"res://ic_action_add\" title=\"test1\" backgroundColor=\"red\"  @tap=\"onTap\"/\u003e\n    \u003cMDSpeedDialItem text=\"mdi-card-account-mail\" title=\"test2\" buttonClass=\"mdi\" backgroundColor=\"green\"  @tap=\"onTap\"/\u003e\n    \u003cMDSpeedDialItem backgroundImage=\"~/images/iu.jpg\"  backgroundColor=\"blue\"  @tap=\"onTap\"/\u003e\n    \u003cMDSpeedDialItem icon=\"res://ic_action_add\" title=\"test4\" backgroundColor=\"orange\" @tap=\"onTap\"/\u003e\n\u003c/MDSpeedDial\u003e\n```\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003eswitch\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-switch)\r\n\r\n# NativeScript Material Switch\n\nMaterial Design's [Switch](https://m3.material.io/components/switch/overview) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-switch.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-prswitchogress)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-switch.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-switch)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4.  [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n    - [Angular](#nativescript--angular)\n    - [Vue](#nativescript--vue)\n5.  [API](#api)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor NativeScript 7.0+\n* `tns plugin add @nativescript-community/ui-material-switch`\n\n##\n\nFor NativeScript 6.x\n* `tns plugin add nativescript-material-switch`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### Plain NativeScript\n\n\u003cspan style=\"color:red\"\u003eIMPORTANT: \u003c/span\u003e_Make sure you include `xmlns:mdp=\"@nativescript-community/ui-material-progress\"` on the Page element_\n\n#### XML\n\n```XML\n\u003cPage xmlns:mdp=\"@nativescript-community/ui-material-switch\"\u003e\n    \u003cStackLayout horizontalAlignment=\"center\"\u003e\n        \u003cmdp:Switch /\u003e\n   \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### CSS\n\n```CSS\nmdswitch{\n    ripple-color: blue;\n    elevation: 4;\n}\n```\n\n##\n\n### NativeScript + Angular\n\n```typescript\nimport { NativeScriptMaterialSwitchModule } from \"@nativescript-community/ui-material-switch/angular\";\n\n@NgModule({\n    imports: [\n        NativeScriptMaterialSwitchModule,\n        ...\n    ],\n    ...\n})\n```\n\n```html\n\u003cMDSwitch v-model=\"value\"\u003e\u003c/MDSwitch\u003e\n```\n\n##\n\n### NativeScript + Vue\n\n```typescript\nimport SwitchPlugin from '@nativescript-community/ui-material-switch/vue';\n\nVue.use(SwitchPlugin);\n```\n\n```html\n\u003cMDSwitch\u003e\u003c/MDSwitch\u003e\n```\n\n\r\n[](#api)\r\n\r\n## API\n\n### Attributes\n\nInherits from NativeScript [Switch](https://docs.nativescript.org/ui/components/switch) so it already has all the same attributes.\n\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003etabs\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-tabs)\r\n\r\n# NativeScript Material Tabs\n\nMaterial Design's [Tabs](https://material.io/components/tabs) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-tabs.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-tabs)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-tabs.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-tabs)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4. [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n    - [Angular](#nativescript--angular)\n    - [Vue](#nativescript--vue)\n    - [React](#nativescript--react)\n5.  [API](#api)\n\n##\n\n```\nns plugin add @nativescript-community/ui-material-tabs\n```\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### Plain NativeScript\n\nIMPORTANT: _Make sure you include `xmlns:mds=\"@nativescript-community/ui-material-tabs\"` on the Page element._\n\n#### XML\n\n```XML\n\u003cPage xmlns:mdt=\"@nativescript-community/ui-material-tabs\"\u003e\n    \u003cmdt:Tabs selectedIndex=\"1\"\u003e\n        \u003c!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--\u003e\n        \u003cmdt:TabStrip\u003e\n            \u003cmdt:TabStripItem\u003e\n                \u003cLabel text=\"Home\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf015;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/mdt:TabStripItem\u003e\n            \u003cmdt:TabStripItem\u003e class=\"special\"\u003e\n                \u003cLabel text=\"Account\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf007;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/mdt:TabStripItem\u003e\n            \u003cmdt:TabStripItem\u003e class=\"special\"\u003e\n                \u003cLabel text=\"Search\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf00e;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/mdt:TabStripItem\u003e\n        \u003c/mdt:TabStrip\u003e\n\n        \u003c!-- The number of TabContentItem components should corespond to the number of TabStripItem components --\u003e\n        \u003cmdt:TabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Home Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/mdt:TabContentItem\u003e\n        \u003cmdt:TabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Account Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/mdt:TabContentItem\u003e\n        \u003cmdt:TabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Search Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/mdt:TabContentItem\u003e\n    \u003c/mdt:Tabs\u003e\n\u003c/Page\u003e\n```\n\n#### CSS\n\n```CSS\nTabs.bottom-nav {\n    background-color: orangered;\n    color: gold;\n    font-size: 18;\n}\n\nTabStripItem.tabstripitem-active {\n    background-color: teal;\n}\n\nTabStripItem.tabstripitem-active:active {\n    background-color: yellowgreen;\n}\n\nTabContentItem.first-tabcontent {\n    background-color: seashell;\n    color: olive;\n}\nTabContentItem.second-tabcontent {\n    background-color: slategray;\n    color: aquamarine;\n}\nTabContentItem.third-tabcontent {\n    background-color: blueviolet;\n    color: antiquewhite;\n}\nTabs MDTabStrip {\n    highlight-color: red;\n}\n```\n\n##\n\n### NativeScript + Angular\n\n```typescript\nimport { NativeScriptMaterialTabsModule } from \"@nativescript-community/ui-material-tabs/angular\";\n\n@NgModule({\n    imports: [\n        NativeScriptMaterialTabsModule,\n        ...\n    ],\n    ...\n})\n```\n\n```html\n    \u003cMDTabs selectedIndex=\"1\"\u003e\n        \u003c!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--\u003e\n        \u003cMDTabStrip\u003e\n            \u003cMDTabStripItem\u003e\n                \u003cLabel text=\"Home\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf015;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/MDTabStripItem\u003e\n            \u003cMDTabStripItem class=\"special\"\u003e\n                \u003cLabel text=\"Account\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf007;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/MDTabStripItem\u003e\n            \u003cMDTabStripItem class=\"special\"\u003e\n                \u003cLabel text=\"Search\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf00e;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/MDTabStripItem\u003e\n        \u003c/MDTabStrip\u003e\n\n        \u003c!-- The number of TabContentItem components should corespond to the number of TabStripItem components --\u003e\n        \u003cMDTabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Home Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/MDTabContentItem\u003e\n        \u003cMDTabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Account Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/MDTabContentItem\u003e\n        \u003cMDTabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Search Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/MDTabContentItem\u003e\n    \u003c/MDTabs\u003e\n```\n\n##\n\n### NativeScript + Vue\n\n```javascript\nimport TabsPlugin from '@nativescript-community/ui-material-tabs/vue';\n\nVue.use(TabsPlugin);\n```\n\n```html\n\u003cMDTabs selectedIndex=\"1\"\u003e\n        \u003c!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--\u003e\n        \u003cMDTabStrip\u003e\n            \u003cMDTabStripItem\u003e\n                \u003cLabel text=\"Home\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf015;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/MDTabStripItem\u003e\n            \u003cMDTabStripItem class=\"special\"\u003e\n                \u003cLabel text=\"Account\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf007;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/MDTabStripItem\u003e\n            \u003cMDTabStripItem class=\"special\"\u003e\n                \u003cLabel text=\"Search\"\u003e\u003c/Label\u003e\n                \u003cImage src=\"font://\u0026#xf00e;\" class=\"fas\"\u003e\u003c/Image\u003e\n            \u003c/MDTabStripItem\u003e\n        \u003c/MDTabStrip\u003e\n\n        \u003c!-- The number of TabContentItem components should corespond to the number of TabStripItem components --\u003e\n        \u003cMDTabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Home Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/MDTabContentItem\u003e\n        \u003cMDTabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Account Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/MDTabContentItem\u003e\n        \u003cMDTabContentItem\u003e\n            \u003cGridLayout\u003e\n                \u003cLabel text=\"Search Page\" class=\"h2 text-center\"\u003e\u003c/Label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/MDTabContentItem\u003e\n    \u003c/MDTabs\u003e\n```\n\n##\n\n### NativeScript + React\n\nFirst, register the component before any of your React NativeScript app renders. A good place to put this code is in your entrypoint file (which may be called `src/app.ts` or similar), before the `ReactNativeScript.start` function is called. Here's how to install it:\n\n```ts\nimport { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react';\nimport { registerTabs } from '@nativescript-community/ui-material-tabs/react';\n\nregisterTabNavigationBase();\nregisterTabs();\n```\n\nNormally it would be best to use this component via the `tabNavigatorFactory()` API exported by [React NativeScript Navigation](https://github.com/shirakaba/react-nativescript-navigation/tree/master/react-nativescript-navigation), as it makes nested navigation easy, but here's how to use it directly:\n\n```tsx\nimport * as React from 'react';\n\nexport function Tabs() {\n    const [selectedIndex, setSelectedIndex] = React.useState(0);\n\n    return (\n        \u003ctabs\n            selectedIndex={selectedIndex}\n            onSelectedIndexChanged={(args) =\u003e {\n                setSelectedIndex(args.newIndex);\n            }}\n            style={{ backgroundColor: 'orange' }}\n        \u003e\n            {/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}\n            \u003ctabStrip nodeRole=\"tabStrip\" style={{ backgroundColor: 'red' }}\u003e\n                \u003ctabStripItem nodeRole=\"items\"\u003e\n                    \u003clabel nodeRole=\"label\"\u003eHome\u003c/label\u003e\n                    \u003cimage nodeRole=\"image\" src=\"font://\u0026#xf015;\" className=\"fas\" /\u003e\n                \u003c/tabStripItem\u003e\n                \u003ctabStripItem nodeRole=\"items\"\u003e\n                    \u003clabel nodeRole=\"label\"\u003eAccount\u003c/label\u003e\n                    \u003cimage nodeRole=\"image\" src=\"font://\u0026#xf007;\" className=\"fas\" /\u003e\n                \u003c/tabStripItem\u003e\n                \u003ctabStripItem nodeRole=\"items\"\u003e\n                    \u003clabel nodeRole=\"label\"\u003eSearch\u003c/label\u003e\n                    \u003cimage nodeRole=\"image\" src=\"font://\u0026#xf00e;\" className=\"fas\" /\u003e\n                \u003c/tabStripItem\u003e\n            \u003c/tabStrip\u003e\n\n            {/* The number of tabContentItem components should corespond to the number of TabStripItem components */}\n            \u003ctabContentItem nodeRole=\"items\"\u003e\n                \u003cgridLayout style={{ backgroundColor: 'blue' }}\u003e\n                    \u003clabel style={{ color: 'white' }}\u003eHome Page\u003c/label\u003e\n                \u003c/gridLayout\u003e\n            \u003c/tabContentItem\u003e\n            \u003ctabContentItem nodeRole=\"items\"\u003e\n                \u003cgridLayout style={{ backgroundColor: 'cyan' }}\u003e\n                    \u003clabel style={{ color: 'black' }}\u003eAccount Page\u003c/label\u003e\n                \u003c/gridLayout\u003e\n            \u003c/tabContentItem\u003e\n            \u003ctabContentItem nodeRole=\"items\"\u003e\n                \u003cgridLayout style={{ backgroundColor: 'magenta' }}\u003e\n                    \u003clabel style={{ color: 'black' }}\u003eSearch Page\u003c/label\u003e\n                \u003c/gridLayout\u003e\n            \u003c/tabContentItem\u003e\n        \u003c/tabs\u003e\n    );\n}\n```\n\n**Troubleshooting**\n\nIf you see an error like this when writing e.g. `\u003ctabs\u003e` into your JSX:\n\n\u003e Property 'tabs' does not exist on type 'JSX.IntrinsicElements'.ts(2339)\n\nMake sure that you have:\n\n1. Installed the `react-nativescript` npm module.\n2. Installed the `@types/react` npm module, strictly with the exact version provided in the [React NativeScript starter template](https://github.com/NativeScript/nativescript-app-templates/tree/master/packages/template-blank-react).\n3. Run the postinstall script that comes with the React NativeScript template – `npm run postinstall` – to patch `@types/react`.\n4. Registered the component as described above (i.e. import and run the `registerTabNavigationBase()` and `registerTabs()` methods).\n5. If using Visual Studio Code, option-click the import `@nativescript-community/ui-material-tabs/react` to jump to the file; opening the file will force it to load its provided typings.\n\n\r\n[](#api)\r\n\r\n## API\n\n### Attributes\n\n| Name                      | Type                  | Description                                                               |\n| -------------             | :-------------:       | -----:                                                                    |\n| items                     | Array\u003cMDTabContentItem\u003e | \tGets or sets the items of the BottomNavigation.                         |\n|selectedIndex              | number                | \tGets or sets the selectedIndex of the BottomNavigation.                 |\n|swipeEnabled               | boolean               |\tGets or sets the swipe enabled state of the Tabs.                       |\n|offscreenTabLimit          | number                |\tGets or sets the number of offscreen preloaded tabs of the Tabs.        |\n|tabStrip \t                | TabStrip              |\tGets or sets the tab strip of the BottomNavigation.                     |\n|tabsPosition               | \"top\", \"bottom\"       |\tGets or sets the position state of the Tabs. Default value: top         |\n\n### Events\n\n| Name                      | Description                                                                   |\n| -------------             | -------------:                                                                |\n| selectedIndexChanged      | Emitted when the selectedIndex property is changed.                           |\n| loaded                    | Emitted when the view is loaded.                                              |\n| unloaded                  | Emitted when the view is unloaded.                                            |\n| layoutChanged             | Emitted when the layout bounds of a view changes due to layout processing.    |\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003etextfield\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-text-field)\r\n\r\n# NativeScript Material Text field\n\nMaterial Design's [Text field](https://material.io/components/text-fields) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-textfield.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-textfield)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-textfield.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-textfield)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4. [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n    - [Angular](#nativescript--angular)\n    - [Vue](#nativescript--vue)\n5.  [API](#api)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor NativeScript 7.0+\n* `tns plugin add @nativescript-community/ui-material-textfield`\n\n##\n\nFor NativeScript 6.x\n* `tns plugin add nativescript-material-textfield`\n\n##\n\nIf using ```tns-core-modules```\n* `tns plugin add nativescript-material-textfield@2.5.4`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### Plain NativeScript\n\nIMPORTANT: _Make sure you include `xmlns:mdt=\"@nativescript-community/ui-material-textfield\"` on the Page element._\n\n#### XML\n\n```XML\n\u003cPage xmlns:mdt=\"@nativescript-community/ui-material-textfield\"\u003e\n    \u003cStackLayout horizontalAlignment=\"center\"\u003e\n        \u003cmdt:TextField text=\"raised textfield\"/\u003e\n        \u003cmdt:TextField variant=\"flat\" text=\"flat textfield\"/\u003e\n        \u003cmdt:TextField variant=\"text\" text=\"text textfield\"/\u003e\n        \u003cmdt:TextField elevation=\"5\" rippleColor=\"red\" text=\"raised custom textfield\"/\u003e\n   \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### CSS\n\n```CSS\nmdtextfield {\n    ripple-color: blue;\n    elevation: 4;\n    stroke-color: blue;             /* the border color when active */\n    stroke-inactive-color: green;   /* the border color when inactive */\n    floating-color: blue;           /* the floating placeholder color when active */\n    floating-inactive-color: green; /* the floating placeholder color when inactive */\n}\n```\n\n##\n\n### NativeScript + Angular\n\n```typescript\nimport { NativeScriptMaterialTextFieldModule } from \"@nativescript-community/ui-material-textfield/angular\";\n\n@NgModule({\n    imports: [\n        NativeScriptMaterialTextFieldModule,\n        ...\n    ],\n    ...\n})\n```\n\n```html\n\u003cMDTextField  helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"\n        hint=\"i am an hint\" returnKeyType=\"next\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"\n        (textChange)=\"onTextChange($event)\"\u003e\u003c/MDTextField\u003e\n```\n\n##\n\n### NativeScript + Vue\n\n```javascript\nimport TextFieldPlugin from '@nativescript-community/ui-material-textfield/vue';\n\nVue.use(TextFieldPlugin);\n```\n\n```html\n\u003cMDTextField helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"\n        hint=\"i am an hint\" returnKeyType=\"next\" @focus=\"onFocus\" @blur=\"onBlur\"\n        @textChange=\"onTextChange\"/\u003e\n```\n\nAlso, you can bind the text to some instance data using the `v-model` directive:\n\n```html\n\u003cMDTextField v-model=\"value\" /\u003e\n```\n\n\r\n[](#api)\r\n\r\n## API\n\n### Attributes\n\nInherite from NativeScript [TextField](https://docs.nativescript.org/ui/components/text-field) so it already has all the same attributes.\n\n* **variant** _optional_\n\nAn attribute to set the variant of the textfield. Can be ```outline``` or ```underline``` or ```filled```. No value means ```underline``` textfield\n\n* **errorColor** _optional_\n\nAn attribute to set the error color of the textfield.\n\n* **helper** _optional_\n\nAn attribute to set the helper text of the textfield.\n\n* **floating** _optional_\n\nA boolean attribute to set the floating state of the textfield.\n\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003etextview\u003c/b\u003e\u003c/summary\u003e\n\n\r\n[](#nativescript-material-text-view)\r\n\r\n# NativeScript Material Text view\n\nMaterial Design's [Text view](https://material.io/develop/android/components/material-text-view) component for NativeScript.\n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-textview.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-textview)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-textview.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-textview)\n\n\r\n[](#contents)\r\n\r\n## Contents\n\n1. [Installation](#installation)\n2. [Changelog](#changelog)\n3. [FAQ](#faq)\n4. [Usage](#usage)\n    - [Plain NativeScript](#plain-nativescript)\n    - [Angular](#nativescript--angular)\n    - [Vue](#nativescript--vue)\n5.  [API](#api)\n\n\r\n[](#installation)\r\n\r\n## Installation\n\nFor NativeScript 7.0+\n* `tns plugin add @nativescript-community/ui-material-textview`\n\n##\n\nFor NativeScript 6.x\n* `tns plugin add nativescript-material-textview`\n\n##\n\nIf using ```tns-core-modules```\n* `tns plugin add nativescript-material-textview@2.5.4`\n\n##\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n\r\n[](#changelogchangelogmd)\r\n\r\n## [Changelog](./CHANGELOG.md)\n\n\r\n[](#faqreadmemdfaq)\r\n\r\n## [FAQ](../../README.md#faq)\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n### Plain NativeScript\n\nIMPORTANT: _Make sure you include `xmlns:mdt=\"@nativescript-community/ui-material-textview\"` on the Page element._\n\n#### XML\n\n```XML\n\u003cPage xmlns:mdt=\"@nativescript-community/ui-material-textview\"\u003e\n    \u003cStackLayout horizontalAlignment=\"center\"\u003e\n        \u003cmdt:TextView text=\"raised textview\"/\u003e\n        \u003cmdt:TextView variant=\"flat\" text=\"flat textview\"/\u003e\n        \u003cmdt:TextView variant=\"text\" text=\"text textview\"/\u003e\n        \u003cmdt:TextView elevation=\"5\" rippleColor=\"red\" text=\"raised custom textview\"/\u003e\n   \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n#### CSS\n\n```CSS\nmdtextview {\n    ripple-color: blue;\n    elevation: 4;\n    stroke-color: blue;             /* the border color when active */\n    stroke-inactive-color: green;   /* the border color when inactive */\n    floating-color: blue;           /* the floating placeholder color when active */\n    floating-inactive-color: green; /* the floating placeholder color when inactive */\n}\n```\n\n##\n\n### NativeScript + Angular\n\n```typescript\nimport { NativeScriptMaterialTextViewModule } from \"@nativescript-community/ui-material-textview/angular\";\n\n@NgModule({\n    imports: [\n        NativeScriptMaterialTextViewModule,\n        ...\n    ],\n    ...\n})\n```\n\n```html\n\u003cMDTextView  helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"\n        hint=\"i am an hint\" returnKeyType=\"next\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"\n        (textChange)=\"onTextChange($event)\"\u003e\u003c/MDTextView\u003e\n```\n\n##\n\n### NativeScript + Vue\n\n```javascript\nimport TextViewPlugin from '@nativescript-community/ui-material-textview/vue';\n\nVue.use(TextViewPlugin);\n```\n\n```html\n\u003cMDTextView helper=\"example helper\" placeholderColor=\"green\" keyboardType=\"datetime\"\n        hint=\"i am an hint\" returnKeyType=\"next\" @focus=\"onFocus\" @blur=\"onBlur\"\n        @textChange=\"onTextChange\"/\u003e\n```\n\nAlso, you can bind the text to some instance data using the `v-model` directive:\n\n```html\n\u003cMDTextView v-model=\"value\" /\u003e\n```\n\n\r\n[](#api)\r\n\r\n## API\n\n### Attributes\n\nInherite from NativeScript [TextView](https://docs.nativescript.org/ui/components/text-view) so it already has all the same attributes.\n\n* **variant** _optional_\n\nAn attribute to set the variant of the textview. Can be ```outline``` or ```underline``` or ```filled```. No value means ```underline``` textview\n\n* **errorColor** _optional_\n\nAn attribute to set the error color of the textview.\n\n* **helper** _optional_\n\nAn attribute to set the helper text of the textview.\n\n* **floating** _optional_\n\nA boolean attribute to set the floating state of the textview.\n\n\u003c/details\u003e\n\r\n[](#faq)\r\n\r\n## FAQ\n\n**Question:** How to use the latest version of this plugin for iOS?\n\n**Answer:** To get latest versions of Material Components for iOS (\u003e 112.1) you will need to change Pod min version to 10.0\nTo do that modify or create `App_Resources/iOS/Podfile` to add `platform :ios, '10.0'`.\nYou can see an example in the demo-vue app.\n\n##\n\n**Q:** How to migrate to AndroidX with this plugin installed (Android only)?\n\n**A:** For Material Components to work correctly with {N} 6 and AndroidX you need to update your android app theme.\nInside ```App_resources/android/res/values/styles.xml``` replace all occurences of ```Theme.AppCompat``` with ```Theme.MaterialComponents```\nYou can see an example in the demo-vue app.\n\n##\n\n**Q:** What is the difference between Bottom Navigation and Bottom Navigation Bar component?\n\n**A:** The _Bottom Navigation Bar_ is a new component to draw a bottom navigation bar in material design.\nThe _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.\n\n##\n\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).","funding_links":["https://github.com/sponsors/farfromrefug"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-material-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fui-material-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-material-components/lists"}