Gathering detailed insights and metrics for @nativescript-community/ui-material-core-tabs
Gathering detailed insights and metrics for @nativescript-community/ui-material-core-tabs
Installations
npm install @nativescript-community/ui-material-core-tabsDeveloper
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
No
Node Version
20.9.0
NPM Version
lerna/3.4.0/node@v20.9.0+x64 (linux)
Statistics
219 Stars
2,408 Commits
80 Forks
27 Watching
16 Branches
53 Contributors
Updated on 27 Nov 2024
Languages
TypeScript (77.11%)
Vue (13.42%)
Java (6.15%)
JavaScript (1.35%)
HTML (1.09%)
Svelte (0.52%)
SCSS (0.19%)
Ruby (0.17%)
Total Downloads
Cumulative downloads
Total Downloads
197,172
Last day
-35.6%
268
Compared to previous day
Last week
-23.3%
1,574
Compared to previous week
Last month
22.4%
8,463
Compared to previous month
Last year
60.8%
107,374
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Versions
Nativescript Material Components
Build beautiful, usable products using Material Components for NativeScript.
Installation
Android
Ensure your Android Theme is inheriting from MaterialComponents.
Inside App_resources/android/res/values/styles.xml replace all occurences of Theme.AppCompat with Theme.MaterialComponents
You can see an example in the demo-vue app.
Production build
If 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
Theming
Defining the theme and the default colors must be done a bit differently on iOS and Android
- Android: You must set the colors through android Style
- iOS: You must set the colors programmatically at your app startup
1import { themer } from '@nativescript-community/ui-material-core'; 2if (global.isIOS) { 3 themer.setPrimaryColor('#bff937'); 4 themer.setAccentColor('#ff8a39'); 5 themer.setSecondaryColor('#a830d7'); 6}
Mixins
Through this component you can apply elevation or rippleColor to any View. To enable that feature your must "install" the mixins. Make sure you do it before creating any view.
1import { installMixins } from '@nativescript-community/ui-material-core'; 2installMixins();
This monorepo contains multiple packages:
activityindicator
NativeScript Material Circular progress indicator
Material Design's Circular progress indicator component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-activityindicator
For NativeScript 6.x
tns plugin add nativescript-material-activityindicator
If using tns-core-modules
tns plugin add nativescript-material-activityindicator@2.5.4
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mda="@nativescript-community/ui-material-activityindicator" on the Page element.
XML
1<Page xmlns:mda="@nativescript-community/ui-material-activityindicator"> 2 <StackLayout horizontalAlignment="center"> 3 <mda:ActivityIndicator busy="true"/> 4 </StackLayout> 5</Page>
CSS
1mdactivityindicator { 2 color: #fff; 3}
NativeScript + Angular
1import { NativeScriptMaterialActivityIndicatorModule } from "@nativescript-community/ui-material-activityindicator/angular"; 2 3@NgModule({ 4 imports: [ 5 NativeScriptMaterialActivityIndicatorModule, 6 ... 7 ], 8 ... 9})
1<MDActivityIndicator busy="true"></MDActivityIndicator>
NativeScript + Vue
1import Vue from 'nativescript-vue'; 2import ActivityIndicatorPlugin from '@nativescript-community/ui-material-activityindicator/vue'; 3 4Vue.use(ActivityIndicatorPlugin);
1<MDActivityIndicator busy="true"/>
API
Attributes
Inherite from NativeScript Activity Indicator so it already has all the same attributes
bottom-navigation
NativeScript Material Bottom navigation
Material Design's Bottom navigation component for NativeScript.
Contents
Installation
1ns plugin add @nativescript-community/ui-material-bottom-navigation
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-bottom-navigation" on the Page element.
XML
1<Page xmlns:mdt="@nativescript-community/ui-material-bottom-navigation"> 2 <mdt:BottomNavigation width="100%" id="main-tabview" class="main-tabview" 3 selectedIndexChanged="onSelectedIndexChanged" 4 iosOverflowSafeArea="true" selectedIndex="0" tabsPosition="bottom" swipeEnabled="false"> 5 <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--> 6 <mdt:TabStrip backgroundColor="color('dark')" color="color('blue')"> 7 <mdt:TabStripItem class="tab-item"> 8 <Image src="font://" class="fal"></Image> 9 <Label text="Home" ios:fontSize="10" android:fontSize="12"></Label> 10 </mdt:TabStripItem> 11 <mdt:TabStripItem class="tab-item"> 12 <Label text="L('search')" ios:fontSize="10" android:fontSize="12"></Label> 13 <Image src="font://" class="fal"></Image> 14 </mdt:TabStripItem> 15 <mdt:TabStripItem class="tab-item"> 16 <Label text="L('trips')" ios:fontSize="10" android:fontSize="12"></Label> 17 <Image src="font://" class="fal"></Image> 18 </mdt:TabStripItem> 19 <mdt:TabStripItem class="tab-item"> 20 <Label text="L('inbox')" ios:fontSize="10" android:fontSize="12"></Label> 21 <Image src="font://" class="fal" id="tab-inbox-icon-fal"></Image> 22 </mdt:TabStripItem> 23 </mdt:TabStrip> 24 25 <!-- The number of TabContentItem components should corespond to the number of TabStripItem components --> 26 <mdt:TabContentItem> 27 <GridLayout> 28 <Label text="Home" class="h2 text-center"></Label> 29 </GridLayout> 30 </mdt:TabContentItem> 31 <mdt:TabContentItem> 32 <GridLayout> 33 <Label text="Search Page" class="h2 text-center"></Label> 34 </GridLayout> 35 </mdt:TabContentItem> 36 <mdt:TabContentItem> 37 <GridLayout> 38 <Label text="TRansactions" class="h2 text-center"></Label> 39 </GridLayout> 40 </mdt:TabContentItem> 41 <mdt:TabContentItem> 42 <GridLayout> 43 <Label text="Inbox" class="h2 text-center"></Label> 44 </GridLayout> 45 </mdt:TabContentItem> 46 </mdt:BottomNavigation> 47</Page>
CSS
1BottomNavigation.bottom-nav { 2 background-color: orangered; 3 color: gold; 4 font-size: 18; 5} 6 7MDTabStripItem.tabstripitem-active { 8 background-color: teal; 9} 10 11MDTabStripItem.tabstripitem-active:active { 12 background-color: yellowgreen; 13} 14 15MDTabContentItem.first-tabcontent { 16 background-color: seashell; 17 color: olive; 18} 19MDTabContentItem.second-tabcontent { 20 background-color: slategray; 21 color: aquamarine; 22} 23MDTabContentItem.third-tabcontent { 24 background-color: blueviolet; 25 color: antiquewhite; 26} 27BottomNavigation TabStrip { 28 highlight-color: red; 29}
NativeScript + Angular
1import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-bottom-navigation/angular"; 2 3@NgModule({ 4 imports: [ 5 NativeScriptMaterialBottomNavigationModule, 6 ... 7 ], 8 ... 9})
1 <MDBottomNavigation selectedIndex="1"> 2 <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--> 3 <MDTabStrip> 4 <MDTabStripItem> 5 <Label text="Home"></Label> 6 <Image src="font://" class="fas"></Image> 7 </MDTabStripItem> 8 <MDTabStripItem class="special"> 9 <Label text="Account"></Label> 10 <Image src="font://" class="fas"></Image> 11 </MDTabStripItem> 12 <MDTabStripItem class="special"> 13 <Label text="Search"></Label> 14 <Image src="font://" class="fas"></Image> 15 </MDTabStripItem> 16 </MDTabStrip> 17 18 <!-- The number of TabContentItem components should corespond to the number of TabStripItem components --> 19 <MDTabContentItem> 20 <GridLayout> 21 <Label text="Home Page" class="h2 text-center"></Label> 22 </GridLayout> 23 </MDTabContentItem> 24 <MDTabContentItem> 25 <GridLayout> 26 <Label text="Account Page" class="h2 text-center"></Label> 27 </GridLayout> 28 </MDTabContentItem> 29 <MDTabContentItem> 30 <GridLayout> 31 <Label text="Search Page" class="h2 text-center"></Label> 32 </GridLayout> 33 </MDTabContentItem> 34 </MDBottomNavigation>
NativeScript + Vue
1import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue'; 2 3Vue.use(BottomNavigation);
1<MDBottomNavigation selectedIndex="1"> 2 <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--> 3 <MDTabStrip> 4 <MDTabStripItem> 5 <Label text="Home"></Label> 6 <Image src="font://" class="fas"></Image> 7 </MDTabStripItem> 8 <MDTabStripItem class="special"> 9 <Label text="Account"></Label> 10 <Image src="font://" class="fas"></Image> 11 </MDTabStripItem> 12 <MDTabStripItem class="special"> 13 <Label text="Search"></Label> 14 <Image src="font://" class="fas"></Image> 15 </MDTabStripItem> 16 </MDTabStrip> 17 18 <!-- The number of TabContentItem components should corespond to the number of TabStripItem components --> 19 <MDTabContentItem> 20 <GridLayout> 21 <Label text="Home Page" class="h2 text-center"></Label> 22 </GridLayout> 23 </MDTabContentItem> 24 <MDTabContentItem> 25 <GridLayout> 26 <Label text="Account Page" class="h2 text-center"></Label> 27 </GridLayout> 28 </MDTabContentItem> 29 <MDTabContentItem> 30 <GridLayout> 31 <Label text="Search Page" class="h2 text-center"></Label> 32 </GridLayout> 33 </MDTabContentItem> 34 </MDBottomNavigation>
NativeScript + React
First, 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:
1import { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react'; 2import { registerBottomNavigation } from '@nativescript-community/ui-material-bottom-navigation/react'; 3 4registerTabNavigationBase(); 5registerBottomNavigation();
When 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, as it makes nested navigation easy, but here's how to use it directly:
1import * as React from 'react'; 2 3export function BottomNavigation() { 4 const [selectedIndex, setSelectedIndex] = React.useState(0); 5 6 return ( 7 <bottomNavigation 8 selectedIndex={selectedIndex} 9 onSelectedIndexChanged={(args) => { 10 setSelectedIndex(args.newIndex); 11 }} 12 style={{ backgroundColor: 'orange' }} 13 > 14 {/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */} 15 <tabStrip nodeRole="tabStrip" style={{ backgroundColor: 'red' }}> 16 <tabStripItem nodeRole="items"> 17 <label nodeRole="label">Home</label> 18 <image nodeRole="image" src="font://" className="fas" /> 19 </tabStripItem> 20 <tabStripItem nodeRole="items"> 21 <label nodeRole="label">Account</label> 22 <image nodeRole="image" src="font://" className="fas" /> 23 </tabStripItem> 24 <tabStripItem nodeRole="items"> 25 <label nodeRole="label">Search</label> 26 <image nodeRole="image" src="font://" className="fas" /> 27 </tabStripItem> 28 </tabStrip> 29 30 {/* The number of tabContentItem components should corespond to the number of TabStripItem components */} 31 <tabContentItem nodeRole="items"> 32 <gridLayout style={{ backgroundColor: 'blue' }}> 33 <label style={{ color: 'white' }}>Home Page</label> 34 </gridLayout> 35 </tabContentItem> 36 <tabContentItem nodeRole="items"> 37 <gridLayout style={{ backgroundColor: 'cyan' }}> 38 <label style={{ color: 'black' }}>Account Page</label> 39 </gridLayout> 40 </tabContentItem> 41 <tabContentItem nodeRole="items"> 42 <gridLayout style={{ backgroundColor: 'magenta' }}> 43 <label style={{ color: 'black' }}>Search Page</label> 44 </gridLayout> 45 </tabContentItem> 46 </bottomNavigation> 47 ); 48}
Troubleshooting
If you see an error like this when writing e.g. <bottomNavigation> into your JSX:
Property 'bottomNavigation' does not exist on type 'JSX.IntrinsicElements'.ts(2339)
Make sure that you have:
- Installed the
react-nativescriptnpm module. - Installed the
@types/reactnpm module, strictly with the exact version provided in the React NativeScript starter template. - Run the postinstall script that comes with the React NativeScript template –
npm run postinstall– to patch@types/react. - Registered the component as described above (i.e. import and run the
registerTabNavigationBase()andregisterBottomNavigation()methods). - If using Visual Studio Code, option-click the import
@nativescript-community/ui-material-bottom-navigation/reactto jump to the file; opening the file will force it to load its provided typings.
API
Attributes
| Name | Type | Description |
|---|---|---|
| items | Array | Gets or sets the items of the BottomNavigation. |
| selectedIndex | number | Gets or sets the selectedIndex of the BottomNavigation. |
| swipeEnabled | boolean | Gets or sets the swipe enabled state of the Tabs. |
| offscreenTabLimit | number | Gets or sets the number of offscreen preloaded tabs of the Tabs. |
| tabStrip | TabStrip | Gets or sets the tab strip of the BottomNavigation. |
| tabsPosition | "top", "bottom" | Gets or sets the position state of the Tabs. Default value: top |
| iOSTabBarItemsAlignment | "leading", "justified", "center", "centerSelected" | iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified |
Events
| Name | Description |
|---|---|
| selectedIndexChanged | Emitted when the selectedIndex property is changed. |
| loaded | Emitted when the view is loaded. |
| unloaded | Emitted when the view is unloaded. |
| layoutChanged | Emitted when the layout bounds of a view changes due to layout processing. |
bottomnavigationbar
NativeScript Material Bottom navigation bar
Material Design's Bottom navigation component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-bottomnavigationbar
For NativeScript 6.x
tns plugin add nativescript-material-bottomnavigationbar
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Before start using the plugin you need to add the icons for Android & iOS in your App_Resources directory.
Plain NativeScript
You can set the tabs using the tabs property
1<Page xmlns="http://schemas.nativescript.org/tns.xsd" 2 xmlns:mdc="@nativescript-community/ui-material-bottomnavigationbar" 3 loaded="pageLoaded" 4 class="page"> 5 <GridLayout rows="*, auto"> 6 <StackLayout row="0"> 7 <Label text="content"></Label> 8 </StackLayout> 9 <mdc:BottomNavigationBar 10 tabs="tabs" 11 activeColor="green" 12 inactiveColor="red" 13 backgroundColor="black" 14 tabSelected="tabSelected" 15 row="1" 16 ></mdc:BottomNavigationBar> 17 </GridLayout> 18</Page>
1import { EventData } from '@nativescript/core/data/observable'; 2import { Page } from '@nativescript/core/ui/page'; 3import { BottomNavigationTab, TabSelectedEventData } from '@nativescript-community/ui-material-bottomnavigationbar'; 4 5// Event handler for Page 'loaded' event attached in main-page.xml 6export function pageLoaded(args: EventData) { 7 // Get the event sender 8 let page = <Page>args.object; 9 page.bindingContext = { 10 tabs: [ 11 new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }), 12 new BottomNavigationTab({ 13 title: 'Second', 14 icon: 'res://ic_view_list', 15 isSelectable: false 16 }), 17 new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' }) 18 ] 19 }; 20} 21 22export function tabSelected(args: TabSelectedEventData) { 23 console.log('tab selected ' + args.newIndex); 24}
or you can add the tabs directly in your xml view
1<Page xmlns="http://schemas.nativescript.org/tns.xsd" 2 xmlns:mdc="@nativescript-community/ui-material-bottomnavigationbar" 3 loaded="pageLoaded" 4 class="page"> 5 <GridLayout rows="*, auto"> 6 <StackLayout row="0"> 7 <Label text="content"></Label> 8 </StackLayout> 9 <mdc:BottomNavigationBar 10 activeColor="green" 11 inactiveColor="red" 12 backgroundColor="black" 13 tabSelected="tabSelected" 14 row="1" 15 > 16 <mdc:BottomNavigationTab title="First" icon="res://ic_home" /> 17 <mdc:BottomNavigationTab title="Second" icon="res://ic_view_list" isSelectable="false" /> 18 <mdc:BottomNavigationTab title="Third" icon="res://ic_menu" /> 19 </mdc:BottomNavigationBar> 20 </GridLayout> 21</Page>
Angular
First you need to include the NativeScriptMaterialBottomNavigationBarModule in your app.module.ts
1import { NativeScriptMaterialBottomNavigationBarModule} from "@nativescript-community/ui-material-bottomnavigationbar/angular"; 2 3@NgModule({ 4 imports: [ 5 NativeScriptMaterialBottomNavigationBarModule 6 ], 7 ... 8})
1<GridLayout rows="*, auto"> 2 <StackLayout row="0"> 3 <label text="content"></label> 4 </StackLayout> 5 <BottomNavigationBar 6 [tabs]="tabs" 7 activeColor="red" 8 inactiveColor="yellow" 9 backgroundColor="black" 10 (tabSelected)="onBottomNavigationTabSelected($event)" 11 (tabPressed)="onBottomNavigationTabPressed($event)" 12 row="1" 13 ></BottomNavigationBar> 14</GridLayout>
or you can declare the BottomNavigationTab in your html directly
1<GridLayout rows="*, auto"> 2 <StackLayout row="0"> 3 <label text="content"></label> 4 </StackLayout> 5 <BottomNavigationBar 6 activeColor="red" 7 inactiveColor="yellow" 8 backgroundColor="black" 9 (tabSelected)="onBottomNavigationTabSelected($event)" 10 (tabPressed)="onBottomNavigationTabPressed($event)" 11 row="1" 12 > 13 <BottomNavigationTab title="First" icon="res://ic_home"></BottomNavigationTab> 14 <BottomNavigationTab title="Second" icon="res://ic_view_list" [isSelectable]="false"></BottomNavigationTab> 15 <BottomNavigationTab title="Third" icon="res://ic_menu"></BottomNavigationTab> 16 </BottomNavigationBar> 17</GridLayout>
Vue
If you want to use this plugin with Vue, do this in your app.js or main.js:
1import BottomNavigationBar from '@nativescript-community/ui-material-bottomnavigationbar/vue'; 2 3Vue.use(BottomNavigationBar);
This will install and register BottomNavigationBar and BottomNavigationTab components to your Vue instance and now you can use the plugin as follows:
1<GridLayout rows="*, auto"> 2 <StackLayout row="0"> 3 <label text="content"></label> 4 </StackLayout> 5 <MDBottomNavigationBar activeColor="red" inactiveColor="yellow" backgroundColor="black" @tabSelected="onBottomNavigationTabSelected" row="1"> 6 <MDBottomNavigationTab title="First" icon="ic_home" /> 7 <MDBottomNavigationTab title="Second" icon="ic_view_list" isSelectable="false" /> 8 <MDBottomNavigationTab title="Third" icon="ic_menu" /> 9 </MDBottomNavigationBar> 10</GridLayout>
You can find more information of how to use nativescript plugins with Vue Here!
CSS Styling
You can also use your css file to set or change the activeColor, inactiveColor & backgroundColor of the Bottom Navigation Bar.
1.botom-nav { 2 active-color: green; 3 inactive-color: black; 4 background-color: blue; 5}
API
- Properties (bindable): Properties settable through XML/HTML
- Properties (internal): Properties accessible through JS/TS instance
- Events: Event properties settable thew XML/HTML
Bottom Navigation Bar
Properties (bindable)
Properties settable through XML/HTML
| Property | Required | Default | Type | Description |
|---|---|---|---|---|
| tabs | true | [] | Array<BottomNavigationTab> | Array containing the tabs for the BottomNavigationBar |
| titleVisibility | false | TitleVisibility.Selected | TitleVisibility | Title Visibility for each BottomNavigationTab |
| activeColor | false | "black" | String | Color of the BottomNavigationTab when it's selected |
| inactiveColor | false | "gray" | String | Color of the BottomNavigationTab when it's not selected |
| backgroundColor | false | "white" | String | Color of the BottomNavigation background |
| badgeColor | false | "red" | String | Color of the BottomNavigationTab badge background |
| badgeTextColor | false | "white" | String | Color of the BottomNavigationTab badge text |
Properties (internal)
Properties accessible through JS/TS instance
| Property | Default | Type | Description |
|---|---|---|---|
| items | [] | Array<BottomNavigationTab> | Array containing the tabs for the BottomNavigationBar |
| selectedTabIndex | 0 | Number | Index of the selected tab |
| titleVisibility | TitleVisibility.Selected | TitleVisibility | Title Visibility for each BottomNavigationTab |
| activeColor | new Color('black') | Color | Color of the BottomNavigationTab when it's selected |
| inactiveColor | new Color('gray') | Color | Color of the BottomNavigationTab when it's not selected |
| backgroundColor | new Color('white') | Color | Color of the BottomNavigation background |
| badgeColor | new Color('red') | Color | Color of the BottomNavigationTab badge background |
| badgeTextColor | new Color('white') | Color | Color of the BottomNavigationTab badge text |
Events
Event properties settable thew XML/HTML
| Name | Type | Description |
|---|---|---|
| tabPressed | (args: TabPressedEventData): void | Function fired every time the user tap a tab with isSelectable: false |
| tabSelected | (args: TabSelectedEventData): void | Function fired every time the user select a new tab |
| tabReselected | (args: TabReselectedEventData): void | Function fired every time the user select a tab that is already selected |
Methods
Methods accessible through JS/TS instance
| Property | Type | Description |
|---|---|---|
selectTab(index: number) | void | Select a tab programmatically |
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 |
Bottom Navigation Tab
Properties (bindable)
Properties settable through XML/HTML
| Property | Required | Default | Type | Description |
|---|---|---|---|---|
| title | true | null | string | Title of the tab |
| icon | true | null | string | Icon of the tab |
| isSelectable | false | true | boolean | Determine if the tab can be selected or not |
bottomsheet
NativeScript Material Bottom sheet
Material Design's Bottom sheet component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-bottomsheet
For NativeScript 6.x
tns plugin add nativescript-material-bottomsheet
If using tns-core-modules
tns plugin add nativescript-material-bottomsheet@2.5.4
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
API
1export interface BottomSheetOptions { 2 view: string | ViewBase; 3 // View instance to be shown in bottom sheet. Or the name of the module to load starting from the application root. 4 context?: any; 5 // 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. 6 animated?: boolean; 7 // An optional parameter specifying whether to show the sheet view with animation. 8 dismissOnBackgroundTap?: boolean; 9 // An optional parameter specifying whether to dismiss the sheet when clicking on background. 10 dismissOnDraggingDownSheet?: boolean; 11 // An optional parameter specifying whether to disable dragging the sheet to dismiss. 12 dismissOnBackButton?: boolean; 13 // An optional parameter that specifies whether to close the sheet when pressing the back button. 14 closeCallback?: Function; 15 // A function that will be called when the view is closed. Any arguments provided when calling shownInBottomSheet.closeCallback will be available here. 16 trackingScrollView?: string; 17 // optional id of the scroll view to track 18 transparent?: boolean; 19 // optional parameter to make the bottomsheet transparent 20 ignoreTopSafeArea?: boolean; 21 // optional ios parameter to top safe area. Default is true 22 ignoreBottomSafeArea?: boolean; 23 // optional ios parameter to bottom safe area. Default is false 24 disableDimBackground?: boolean; 25 // optional parameter to remove the dim background 26 skipCollapsedState?: boolean; 27 // optional Android parameter to skip midway state when view is greater than 50%. Default is false 28 peekHeight?: number; 29 // 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 30 ignoreKeyboardHeight?: boolean; 31 //(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) 32 onChangeState?: onChangeStateBottomSheet; 33 // 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. 34 canTouchBehind?: boolean //(Android only) allows to interact with the screen behind the sheet. For it to work properly need dismissOnBackgroundTap set to true. 35}
Usage
Plain NativeScript
We need to do some wiring when your app starts, so open app.js and add this before creating any View/App/Frame:
JavaScript
1var material = require("@nativescript-community/ui-material-bottomsheet"); 2 3material.install();
TypeScript
1import { install } from "@nativescript-community/ui-material-bottomsheet"; 2install();
Uses the same kind of API as NativeScript Modals.
TS
1const modalViewModulets = "ns-ui-category/modal-view/basics/modal-ts-view-page"; 2export function openBottomSheet(args) { 3 const mainView: Button = <Button>args.object; 4 const context = { username: "test_username", password: "test" }; 5 const fullscreen = true; 6 mainView.showBottomSheet({ 7 view: modalViewModulets, 8 context, 9 closeCallback: (username, password) => { 10 bottom-sheet 11 alert(`Username: ${username} : Password: ${password}`); 12 }, 13 fullscreen 14 }); 15} 16
NativeScript + Vue 2
1import Vue from 'nativescript-vue'; 2import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue'; 3import { install } from "@nativescript-community/ui-material-bottomsheet"; 4install(); 5 6Vue.use(BottomSheetPlugin);
Then you can show a Vue component:
1import MyComponent from 'MyComponent.vue'; 2 3//inside another Vue component 4const options: VueBottomSheetOptions = { 5 // props to be passed to MyComponent 6 props: { 7 someProp: true, 8 anotherProp: false 9 }, 10 // listeners to be connected to MyComponent 11 on: { 12 someEvent: (value) => { console.log(value) } 13 } 14}; 15this.$showBottomSheet(MyComponent, options)
NativeScript + Vue 3
1import { createApp } from 'nativescript-vue'; 2import { BottomSheetPlugin } from '@nativescript-community/ui-material-bottomsheet/vue3'; 3import { install } from "@nativescript-community/ui-material-bottomsheet"; 4install(); 5 6const app = createApp(...); 7app.use(BottomSheetPlugin);
Then you can show a Vue component:
1import { useBottomSheet } from "@nativescript-community/ui-material-bottomsheet/vue3"; 2import MyComponent from 'MyComponent.vue'; 3 4 5const options: VueBottomSheetOptions = { 6 // props to be passed to MyComponent 7 props: { 8 someProp: true, 9 anotherProp: false 10 }, 11 // listeners to be connected to MyComponent 12 on: { 13 someEvent: (value) => { console.log(value) } 14 } 15}; 16 17const { showBottomSheet, closeBottomSheet } = useBottomSheet() 18 19showBottomSheet(MyComponent, options); 20closeBottomSheet();
NativeScript + Angular
First you need to include the NativeScriptMaterialBottomSheetModule in your app.module.ts
1import { NativeScriptMaterialBottomSheetModule} from "@nativescript-community/ui-material-bottomsheet/angular"; 2 3@NgModule({ 4 imports: [ 5 // This will call the install method and inject a global service called BottomSheetService 6 NativeScriptMaterialBottomSheetModule.forRoot() 7 ], 8 ... 9})
now you can show your custom BottomSheet using the BottomSheetService, this service follows the same implementation as the ModalService
ItemComponent
1import { Component, ViewContainerRef } from '@angular/core'; 2import { BottomSheetOptions, BottomSheetService } from '@nativescript-community/ui-material-bottomsheet/angular'; 3import { ShareOptionsComponent } from './share-options.component'; 4 5@Component({ 6 selector: 'ns-item', 7 templateUrl: './item.component.html', 8 moduleId: module.id 9}) 10export class ItemComponent { 11 constructor( 12 private bottomSheet: BottomSheetService, 13 private containerRef: ViewContainerRef, 14 ) {} 15 16 showOptions() { 17 const options: BottomSheetOptions = { 18 viewContainerRef: this.containerRef, 19 context: ['Facebook', 'Google', 'Twitter'] 20 }; 21 22 this.bottomSheet.show(ShareOptionsComponent, options).subscribe(result => { 23 console.log('Option selected:', result); 24 }); 25 } 26}
ShareOptionsComponent
1<ListView 2 [items]="options" 3 (itemTap)="onTap($event)" 4 separatorColor="white" 5 class="list-group" 6 height="200" 7> 8 <ng-template let-option="item"> 9 <Label 10 class="list-group-item" 11 [text]="option" 12 ></Label> 13 </ng-template> 14</ListView>
1import { Component, OnInit } from '@angular/core'; 2import { BottomSheetParams } from '@nativescript-community/ui-material-bottomsheet/angular'; 3import { ItemEventData } from '@nativescript/core/ui/list-view'; 4 5@Component({ 6 selector: 'ns-share-options', 7 templateUrl: 'share-options.component.html' 8}) 9export class ShareOptionsComponent implements OnInit { 10 options: string[]; 11 12 // The BottomSheetService injects the BottomSheetParams to the component 13 // so you can get the context and call the closeCallback method from the component displayed in your BottomSheet 14 constructor(private params: BottomSheetParams) {} 15 16 ngOnInit() { 17 this.options = this.params.context; 18 } 19 20 onTap({ index }: ItemEventData) { 21 this.params.closeCallback(this.options[index]); 22 } 23}
button
NativeScript Material Button
Material Design's Button component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-button
For NativeScript 6.x
tns plugin add nativescript-material-button
If using tns-core-modules
tns plugin add nativescript-material-button@2.5.4
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mdb="@nativescript-community/ui-material-button" on the Page element
XML
1<Page xmlns:mdb="@nativescript-community/ui-material-button"> 2 <StackLayout horizontalAlignment="center"> 3 <mdb:Button text="raised button"/> 4 <mdb:Button variant="flat" text="flat button"/> 5 <mdb:Button variant="text" text="text button"/> 6 <mdb:Button elevation="5" rippleColor="red" text="raised custom button"/> 7 </StackLayout> 8</Page>
CSS
1mdbutton { 2 ripple-color: blue; 3 elevation: 4; 4}
NativeScript + Angular
1import { NativeScriptMaterialButtonModule } from "@nativescript-community/ui-material-button/angular"; 2 3@NgModule({ 4 imports: [ 5 NativeScriptMaterialButtonModule, 6 ... 7 ], 8 ... 9})
1<MDButton rippleColor="blue" text="text button"></MDButton>
NativeScript + Vue
1import Vue from 'nativescript-vue'; 2import ButtonPlugin from '@nativescript-community/ui-material-button/vue'; 3 4Vue.use(ButtonPlugin);
1<MDButton rippleColor="blue" text="text button"/>
API
Attributes
Inherite from NativeScript Button so it already has all the same attributes.
- elevation optional
An attribute to set the elevation of the button. This will increase the 'drop-shadow' of the button.
- variant optional
An attribute to set the variant of the button. Can be flat or text. No value means raised button
- rippleColor optional
An attribute to set the ripple color of the button.
cardview
NativeScript Material Card
Material Design's Card component for NativeScript.
Contents
Installation
For N 7.0
tns plugin add @nativescript-community/ui-material-cardview
For N 6.x
tns plugin add nativescript-material-cardview
If using tns-core-modules
tns plugin add nativescript-material-cardview@2.5.4
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mdc="@nativescript-community/ui-material-cardview" on the Page element
XML
1<Page xmlns:mdc="@nativescript-community/ui-material-cardview"> 2 <StackLayout horizontalAlignment="center"> 3 <mdc:CardView width="100" height="100"/> 4 <mdc:CardView elevation="5" rippleColor="red" width="100" height="100"/> 5 </StackLayout> 6</Page>
CSS
1mdcardview { 2 ripple-color: blue; 3 elevation: 4; 4}
NativeScript + Angular
1import { NativeScriptMaterialCardViewModule } from "@nativescript-community/ui-material-cardview/angular"; 2 3@NgModule({ 4 imports: [ 5 NativeScriptMaterialCardViewModule, 6 ... 7 ], 8 ... 9})
1<MDCardView rippleColor="blue" width="100" height="100"></MDCardView>
NativeScript + Vue
1import Vue from 'nativescript-vue'; 2import CardViewPlugin from '@nativescript-community/ui-material-cardview/vue'; 3 4Vue.use(CardViewPlugin);
1<MDCardView rippleColor="blue" width="100" height="100"/>
API
Attributes
Inherite from NativeScript StackLayout
- elevation optional
An attribute to set the elevation of the cardview. This will increase the 'drop-shadow' of the cardview.
- rippleColor optional
An attribute to set the ripple color of the cardview.
dialogs
NativeScript Material Dialogs
Material Design's Dialogs component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-dialogs
For NativeScript 6.x
tns plugin add nativescript-material-dialogs
If using tns-core-modules
tns plugin add nativescript-material-dialogs@2.5.4
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Uses the same API as NativeScript Dialogs.
Adds one option for alert:
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.
TS
1import { login, alert, prompt } from "@nativescript-community/ui-material-dialogs"; 2 3alert("Your message").then(()=> { 4 console.log("Dialog closed!"); 5}); 6
floatingactionbutton
NativeScript Material Floating action button
Material Design's Floating action button component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-floatingactionbutton
For NativeScript 6.x
tns plugin add nativescript-material-floatingactionbutton
If using tns-core-modules
tns plugin add nativescript-material-floatingactionbutton@2.5.4
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mdf="@nativescript-community/ui-material-floatingactionbutton" on the Page element
XML
1<Page xmlns:mdf="@nativescript-community/ui-material-floatingactionbutton"> 2 <StackLayout horizontalAlignment="center"> 3 <mdf:FloatingActionButton src="res://ic_action_add"/> 4 <mdf:FloatingActionButton elevation="5" src="res://ic_action_add"/> 5 </StackLayout> 6</Page>
CSS
1mdfloatingactionbutton { 2 ripple-color: blue; 3 elevation: 4; 4}
NativeScript + Angular
1import { registerElement } from '@nativescript/angular/element-registry'; 2import { FloatingActionButton } from '@nativescript-community/ui-material-floatingactionbutton'; 3registerElement('MDFloatingActionButton', () => FloatingActionButton);
1<MDFloatingActionButton rippleColor="blue" src="res://ic_action_add"></MDFloatingActionButton>
NativeScript + Vue
1import Vue from 'nativescript-vue'; 2import FloatingActionButtonPlugin from '@nativescript-community/ui-material-floatingactionbutton/vue'; 3 4Vue.use(FloatingActionButtonPlugin);
1<MDFloatingActionButton rippleColor="blue" src="res://ic_action_add"/>
API
Attributes
Inherite from NativeScript Button so it already has all the same attributes.
- src optional
An attribute to set the floatingactionbutton icon. For now FAB only support images as icon
- elevation optional
An attribute to set the elevation of the floatingactionbutton. This will increase the 'drop-shadow' of the floatingactionbutton.
- rippleColor optional
An attribute to set the ripple color of the floatingactionbutton.
progress
NativeScript Material Linear progress indicator
Material Design's Linear progress indicator component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-progress
For NativeScript 6.x
tns plugin add nativescript-material-progress
If using tns-core-modules
tns plugin add nativescript-material-progress@2.5.4
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mdp="@nativescript-community/ui-material-progress" on the Page element
XML
1<Page xmlns:mdp="@nativescript-community/ui-material-progress"> 2 <StackLayout horizontalAlignment="center"> 3 <mdp:Progress value="50" maxValue="100"/> 4 </StackLayout> 5</Page>
CSS
1mdprogress { 2 ripple-color: blue; 3 elevation: 4; 4}
NativeScript + Angular
1import { NativeScriptMaterialProgressModule } from "@nativescript-community/ui-material-progress/angular"; 2 3@NgModule({ 4 imports: [ 5 NativeScriptMaterialProgressModule, 6 ... 7 ], 8 ... 9})
1<MDProgress v-model="value" maxValue="100"></MDProgress>
NativeScript + Vue
1import ProgressPlugin from '@nativescript-community/ui-material-progress/vue'; 2 3Vue.use(ProgressPlugin);
1<MDProgress value="50" maxValue="100"></MDProgress>
API
Attributes
Inherite from NativeScript Progress so it already has all the same attributes.
- elevation optional
An attribute to set the elevation of the progress. This will increase the 'drop-shadow' of the progress.
- rippleColor optional
An attribute to set the ripple color of the progress.
ripple
NativeScript Material Ripple
Material Design's Ripple component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-ripple
For NativeScript 6.x
tns plugin add nativescript-material-ripple
If using tns-core-modules
tns plugin add nativescript-material-ripple@2.5.4
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mdr="@nativescript-community/ui-material-ripple" on the Page element
XML
1<Page xmlns:mdr="@nativescript-community/ui-material-ripple"> 2 <StackLayout horizontalAlignment="center"> 3 <mdr:Ripple rippleColor="green" width="100" height="100" /> 4 </StackLayout> 5</Page>
CSS
1mdripple { 2 ripple-color: blue; 3}
NativeScript + Angular
1import { NativeScriptMaterialRippleModule } from "@nativescript-community/ui-material-ripple/angular"; 2 3@NgModule({ 4 imports: [ 5 NativeScriptMaterialRippleModule, 6 ... 7 ], 8 ... 9})
1<MDRipple rippleColor="green" width="100" height="100"></MDRipple>
NativeScript + Vue
1import Vue from 'nativescript-vue'; 2import RipplePlugin from '@nativescript-community/ui-material-ripple/vue'; 3 4Vue.use(RipplePlugin);
1<MDRipple rippleColor="green" width="100" height="100"/>
API
Attributes
Inherite from NativeScript StackLayout.
- rippleColor optional
An attribute to set the ripple color of the ripple.
slider
NativeScript Material Slider
Material Design's Slider component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-slider
For NativeScript 6.x
tns plugin add nativescript-material-slider
If using tns-core-modules
tns plugin add nativescript-material-slider@2.5.4
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-slider" on the Page element.
XML
1<Page xmlns:mds="@nativescript-community/ui-material-slider"> 2 <StackLayout horizontalAlignment="center"> 3 <mds:Slider value="50" minValue="0" maxValue="100" /> 4 </StackLayout> 5</Page>
CSS
1mdslider { 2 ripple-color: blue; 3 elevation: 4; 4}
NativeScript + Angular
1import { NativeScriptMaterialSliderModule } from "@nativescript-community/ui-material-slider/angular"; 2 3@NgModule({ 4 imports: [ 5 NativeScriptMaterialSliderModule, 6 ... 7 ], 8 ... 9})
1<MDSlider value="50" minValue="0" maxValue="100"></MDSlider>
NativeScript + Vue
1import SliderPlugin from '@nativescript-community/ui-material-slider/vue'; 2 3Vue.use(SliderPlugin);
1<MDSlider value="50" minValue="0" maxValue="100" @valueChange="onValueChanged"/>
Or you can bind the value to some instance data using the v-model directive:
1<MDSlider v-model="value" minValue="0" maxValue="100"/>
API
Attributes
Inherite from NativeScript Slider so it already has all the same attributes.
-
stepSize optional
- An attribute to set the step size of the slider. Without this attribute, it behaves as a continuous slider.
-
elevation optional
- An attribute to set the elevation of the slider. This will increase the 'drop-shadow' of the slider.
-
rippleColor optional
- An attribute to set the ripple color of the slider.
-
trackFillColor optional
- Sets the color of the filled track.
- Defaults to your theme's
colorPrimary.
-
trackBackgroundColor optional
- Sets the color of the background track.
-
thumbColor optional
- Sets the color of the slider's thumb.
- Defaults to your theme's
colorPrimary.
snackbar
NativeScript Material Snackbar
Material Design's Snackbar component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-snackbar
For NativeScript 6.x
tns plugin add nativescript-material-snackbar
If using tns-core-modules
tns plugin add nativescript-material-snackbar@2.5.4
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
TypeScript
1import { SnackBar } from '@nativescript-community/ui-material-snackbar'; 2 3const snackbar = new SnackBar(); 4 5export function showSimpleSnackbar() { 6 snackbar.simple(`I'm a simple snackbar`).then(result => console.log('Simple Snackbar:', result)); 7} 8 9export function showActionSnackbar() { 10 snackbar 11 .action({ 12 message: `I'm a snackbar with an action`, 13 actionText: 'Dismiss', 14 hideDelay: 2000 15 }) 16 .then(result => console.log('Action Snackbar:', result)); 17} 18 19export function showColorfulSnackbar() { 20 snackbar 21 .action({ 22 message: `I'm a colorful snackbar`, 23 textColor: 'blue', 24 actionTextColor: 'yellow', 25 backgroundColor: 'green', 26 actionText: 'Dismiss', 27 hideDelay: 2000 28 }) 29 .then(result => console.log('Action Snackbar:', result)); 30} 31
speeddial
NativeScript Material Speed dial
Material Design's Speed dial component for NativeScript.
Contents
Installation
1ns plugin add @nativescript-community/ui-material-speeddial
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
NativeScript + Vue
1import Vue from 'nativescript-vue'; 2import speeddialPlugin from '@nativescript-community/ui-material-speeddial/vue'; 3 4Vue.use(speeddialPlugin);
1<MDSpeedDial buttonFontSize="26" text="mdi-one-up" buttonClass="mdi" buttonBackgroundColor="yellow" @tap="onTap"> 2 <MDSpeedDialItem icon="res://ic_action_add" title="test1" backgroundColor="red" @tap="onTap"/> 3 <MDSpeedDialItem text="mdi-card-account-mail" title="test2" buttonClass="mdi" backgroundColor="green" @tap="onTap"/> 4 <MDSpeedDialItem backgroundImage="~/images/iu.jpg" backgroundColor="blue" @tap="onTap"/> 5 <MDSpeedDialItem icon="res://ic_action_add" title="test4" backgroundColor="orange" @tap="onTap"/> 6</MDSpeedDial>
switch
NativeScript Material Switch
Material Design's Switch component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-switch
For NativeScript 6.x
tns plugin add nativescript-material-switch
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mdp="@nativescript-community/ui-material-progress" on the Page element
XML
1<Page xmlns:mdp="@nativescript-community/ui-material-switch"> 2 <StackLayout horizontalAlignment="center"> 3 <mdp:Switch /> 4 </StackLayout> 5</Page>
CSS
1mdswitch{ 2 ripple-color: blue; 3 elevation: 4; 4}
NativeScript + Angular
1import { NativeScriptMaterialSwitchModule } from "@nativescript-community/ui-material-switch/angular"; 2 3@NgModule({ 4 imports: [ 5 NativeScriptMaterialSwitchModule, 6 ... 7 ], 8 ... 9})
1<MDSwitch v-model="value"></MDSwitch>
NativeScript + Vue
1import SwitchPlugin from '@nativescript-community/ui-material-switch/vue'; 2 3Vue.use(SwitchPlugin);
1<MDSwitch></MDSwitch>
API
Attributes
Inherits from NativeScript Switch so it already has all the same attributes.
tabs
NativeScript Material Tabs
Material Design's Tabs component for NativeScript.
Contents
ns plugin add @nativescript-community/ui-material-tabs
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-tabs" on the Page element.
XML
1<Page xmlns:mdt="@nativescript-community/ui-material-tabs"> 2 <mdt:Tabs selectedIndex="1"> 3 <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--> 4 <mdt:TabStrip> 5 <mdt:TabStripItem> 6 <Label text="Home"></Label> 7 <Image src="font://" class="fas"></Image> 8 </TabStripItem> 9 <mdt:TabStripItem> class="special"> 10 <Label text="Account"></Label> 11 <Image src="font://" class="fas"></Image> 12 </mdt:TabStripItem> 13 <mdt:TabStripItem> class="special"> 14 <Label text="Search"></Label> 15 <Image src="font://" class="fas"></Image> 16 </mdt:TabStripItem> 17 </mdt:TabStrip> 18 19 <!-- The number of TabContentItem components should corespond to the number of TabStripItem components --> 20 <mdt:TabContentItem> 21 <GridLayout> 22 <Label text="Home Page" class="h2 text-center"></Label> 23 </GridLayout> 24 </mdt:TabContentItem> 25 <mdt:TabContentItem> 26 <GridLayout> 27 <Label text="Account Page" class="h2 text-center"></Label> 28 </GridLayout> 29 </mdt:TabContentItem> 30 <mdt:TabContentItem> 31 <GridLayout> 32 <Label text="Search Page" class="h2 text-center"></Label> 33 </GridLayout> 34 </mdt:TabContentItem> 35 </mdt:Tabs> 36</Page>
CSS
1Tabs.bottom-nav { 2 background-color: orangered; 3 color: gold; 4 font-size: 18; 5} 6 7TabStripItem.tabstripitem-active { 8 background-color: teal; 9} 10 11TabStripItem.tabstripitem-active:active { 12 background-color: yellowgreen; 13} 14 15TabContentItem.first-tabcontent { 16 background-color: seashell; 17 color: olive; 18} 19TabContentItem.second-tabcontent { 20 background-color: slategray; 21 color: aquamarine; 22} 23TabContentItem.third-tabcontent { 24 background-color: blueviolet; 25 color: antiquewhite; 26} 27Tabs MDTabStrip { 28 highlight-color: red; 29}
NativeScript + Angular
1import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-tabs/angular"; 2 3@NgModule({ 4 imports: [ 5 NativeScriptMaterialTabsModule, 6 ... 7 ], 8 ... 9})
1 <MDTabs selectedIndex="1"> 2 <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--> 3 <MDTabStrip> 4 <MDTabStripItem> 5 <Label text="Home"></Label> 6 <Image src="font://" class="fas"></Image> 7 </MDTabStripItem> 8 <MDTabStripItem class="special"> 9 <Label text="Account"></Label> 10 <Image src="font://" class="fas"></Image> 11 </MDTabStripItem> 12 <MDTabStripItem class="special"> 13 <Label text="Search"></Label> 14 <Image src="font://" class="fas"></Image> 15 </MDTabStripItem> 16 </MDTabStrip> 17 18 <!-- The number of TabContentItem components should corespond to the number of TabStripItem components --> 19 <MDTabContentItem> 20 <GridLayout> 21 <Label text="Home Page" class="h2 text-center"></Label> 22 </GridLayout> 23 </MDTabContentItem> 24 <MDTabContentItem> 25 <GridLayout> 26 <Label text="Account Page" class="h2 text-center"></Label> 27 </GridLayout> 28 </MDTabContentItem> 29 <MDTabContentItem> 30 <GridLayout> 31 <Label text="Search Page" class="h2 text-center"></Label> 32 </GridLayout> 33 </MDTabContentItem> 34 </MDTabs>
NativeScript + Vue
1import TabsPlugin from '@nativescript-community/ui-material-tabs/vue'; 2 3Vue.use(TabsPlugin);
1<MDTabs selectedIndex="1"> 2 <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)--> 3 <MDTabStrip> 4 <MDTabStripItem> 5 <Label text="Home"></Label> 6 <Image src="font://" class="fas"></Image> 7 </MDTabStripItem> 8 <MDTabStripItem class="special"> 9 <Label text="Account"></Label> 10 <Image src="font://" class="fas"></Image> 11 </MDTabStripItem> 12 <MDTabStripItem class="special"> 13 <Label text="Search"></Label> 14 <Image src="font://" class="fas"></Image> 15 </MDTabStripItem> 16 </MDTabStrip> 17 18 <!-- The number of TabContentItem components should corespond to the number of TabStripItem components --> 19 <MDTabContentItem> 20 <GridLayout> 21 <Label text="Home Page" class="h2 text-center"></Label> 22 </GridLayout> 23 </MDTabContentItem> 24 <MDTabContentItem> 25 <GridLayout> 26 <Label text="Account Page" class="h2 text-center"></Label> 27 </GridLayout> 28 </MDTabContentItem> 29 <MDTabContentItem> 30 <GridLayout> 31 <Label text="Search Page" class="h2 text-center"></Label> 32 </GridLayout> 33 </MDTabContentItem> 34 </MDTabs>
NativeScript + React
First, 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:
1import { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react'; 2import { registerTabs } from '@nativescript-community/ui-material-tabs/react'; 3 4registerTabNavigationBase(); 5registerTabs();
Normally it would be best to use this component via the tabNavigatorFactory() API exported by React NativeScript Navigation, as it makes nested navigation easy, but here's how to use it directly:
1import * as React from 'react'; 2 3export function Tabs() { 4 const [selectedIndex, setSelectedIndex] = React.useState(0); 5 6 return ( 7 <tabs 8 selectedIndex={selectedIndex} 9 onSelectedIndexChanged={(args) => { 10 setSelectedIndex(args.newIndex); 11 }} 12 style={{ backgroundColor: 'orange' }} 13 > 14 {/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */} 15 <tabStrip nodeRole="tabStrip" style={{ backgroundColor: 'red' }}> 16 <tabStripItem nodeRole="items"> 17 <label nodeRole="label">Home</label> 18 <image nodeRole="image" src="font://" className="fas" /> 19 </tabStripItem> 20 <tabStripItem nodeRole="items"> 21 <label nodeRole="label">Account</label> 22 <image nodeRole="image" src="font://" className="fas" /> 23 </tabStripItem> 24 <tabStripItem nodeRole="items"> 25 <label nodeRole="label">Search</label> 26 <image nodeRole="image" src="font://" className="fas" /> 27 </tabStripItem> 28 </tabStrip> 29 30 {/* The number of tabContentItem components should corespond to the number of TabStripItem components */} 31 <tabContentItem nodeRole="items"> 32 <gridLayout style={{ backgroundColor: 'blue' }}> 33 <label style={{ color: 'white' }}>Home Page</label> 34 </gridLayout> 35 </tabContentItem> 36 <tabContentItem nodeRole="items"> 37 <gridLayout style={{ backgroundColor: 'cyan' }}> 38 <label style={{ color: 'black' }}>Account Page</label> 39 </gridLayout> 40 </tabContentItem> 41 <tabContentItem nodeRole="items"> 42 <gridLayout style={{ backgroundColor: 'magenta' }}> 43 <label style={{ color: 'black' }}>Search Page</label> 44 </gridLayout> 45 </tabContentItem> 46 </tabs> 47 ); 48}
Troubleshooting
If you see an error like this when writing e.g. <tabs> into your JSX:
Property 'tabs' does not exist on type 'JSX.IntrinsicElements'.ts(2339)
Make sure that you have:
- Installed the
react-nativescriptnpm module. - Installed the
@types/reactnpm module, strictly with the exact version provided in the React NativeScript starter template. - Run the postinstall script that comes with the React NativeScript template –
npm run postinstall– to patch@types/react. - Registered the component as described above (i.e. import and run the
registerTabNavigationBase()andregisterTabs()methods). - If using Visual Studio Code, option-click the import
@nativescript-community/ui-material-tabs/reactto jump to the file; opening the file will force it to load its provided typings.
API
Attributes
| Name | Type | Description |
|---|---|---|
| items | Array | Gets or sets the items of the BottomNavigation. |
| selectedIndex | number | Gets or sets the selectedIndex of the BottomNavigation. |
| swipeEnabled | boolean | Gets or sets the swipe enabled state of the Tabs. |
| offscreenTabLimit | number | Gets or sets the number of offscreen preloaded tabs of the Tabs. |
| tabStrip | TabStrip | Gets or sets the tab strip of the BottomNavigation. |
| tabsPosition | "top", "bottom" | Gets or sets the position state of the Tabs. Default value: top |
Events
| Name | Description |
|---|---|
| selectedIndexChanged | Emitted when the selectedIndex property is changed. |
| loaded | Emitted when the view is loaded. |
| unloaded | Emitted when the view is unloaded. |
| layoutChanged | Emitted when the layout bounds of a view changes due to layout processing. |
textfield
NativeScript Material Text field
Material Design's Text field component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-textfield
For NativeScript 6.x
tns plugin add nativescript-material-textfield
If using tns-core-modules
tns plugin add nativescript-material-textfield@2.5.4
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mdt="@nativescript-community/ui-material-textfield" on the Page element.
XML
1<Page xmlns:mdt="@nativescript-community/ui-material-textfield"> 2 <StackLayout horizontalAlignment="center"> 3 <mdt:TextField text="raised textfield"/> 4 <mdt:TextField variant="flat" text="flat textfield"/> 5 <mdt:TextField variant="text" text="text textfield"/> 6 <mdt:TextField elevation="5" rippleColor="red" text="raised custom textfield"/> 7 </StackLayout> 8</Page>
CSS
1mdtextfield { 2 ripple-color: blue; 3 elevation: 4; 4 stroke-color: blue; /* the border color when active */ 5 stroke-inactive-color: green; /* the border color when inactive */ 6 floating-color: blue; /* the floating placeholder color when active */ 7 floating-inactive-color: green; /* the floating placeholder color when inactive */ 8}
NativeScript + Angular
1import { NativeScriptMaterialTextFieldModule } from "@nativescript-community/ui-material-textfield/angular"; 2 3@NgModule({ 4 imports: [ 5 NativeScriptMaterialTextFieldModule, 6 ... 7 ], 8 ... 9})
1<MDTextField helper="example helper" placeholderColor="green" keyboardType="datetime" 2 hint="i am an hint" returnKeyType="next" (focus)="onFocus($event)" (blur)="onBlur($event)" 3 (textChange)="onTextChange($event)"></MDTextField>
NativeScript + Vue
1import TextFieldPlugin from '@nativescript-community/ui-material-textfield/vue'; 2 3Vue.use(TextFieldPlugin);
1<MDTextField helper="example helper" placeholderColor="green" keyboardType="datetime" 2 hint="i am an hint" returnKeyType="next" @focus="onFocus" @blur="onBlur" 3 @textChange="onTextChange"/>
Also, you can bind the text to some instance data using the v-model directive:
1<MDTextField v-model="value" />
API
Attributes
Inherite from NativeScript TextField so it already has all the same attributes.
- variant optional
An attribute to set the variant of the textfield. Can be outline or underline or filled. No value means underline textfield
- errorColor optional
An attribute to set the error color of the textfield.
- helper optional
An attribute to set the helper text of the textfield.
- floating optional
A boolean attribute to set the floating state of the textfield.
textview
NativeScript Material Text view
Material Design's Text view component for NativeScript.
Contents
Installation
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-textview
For NativeScript 6.x
tns plugin add nativescript-material-textview
If using tns-core-modules
tns plugin add nativescript-material-textview@2.5.4
Be sure to run a new build after adding plugins to avoid any issues.
Changelog
FAQ
Usage
Plain NativeScript
IMPORTANT: Make sure you include xmlns:mdt="@nativescript-community/ui-material-textview" on the Page element.
XML
1<Page xmlns:mdt="@nativescript-community/ui-material-textview"> 2 <StackLayout horizontalAlignment="center"> 3 <mdt:TextView text="raised textview"/> 4 <mdt:TextView variant="flat" text="flat textview"/> 5 <mdt:TextView variant="text" text="text textview"/> 6 <mdt:TextView elevation="5" rippleColor="red" text="raised custom textview"/> 7 </StackLayout> 8</Page>
CSS
1mdtextview { 2 ripple-color: blue; 3 elevation: 4; 4 stroke-color: blue; /* the border color when active */ 5 stroke-inactive-color: green; /* the border color when inactive */ 6 floating-color: blue; /* the floating placeholder color when active */ 7 floating-inactive-color: green; /* the floating placeholder color when inactive */ 8}
NativeScript + Angular
1import { NativeScriptMaterialTextViewModule } from "@nativescript-community/ui-material-textview/angular"; 2 3@NgModule({ 4 imports: [ 5 NativeScriptMaterialTextViewModule, 6 ... 7 ], 8 ... 9})
1<MDTextView helper="example helper" placeholderColor="green" keyboardType="datetime" 2 hint="i am an hint" returnKeyType="next" (focus)="onFocus($event)" (blur)="onBlur($event)" 3 (textChange)="onTextChange($event)"></MDTextView>
NativeScript + Vue
1import TextViewPlugin from '@nativescript-community/ui-material-textview/vue'; 2 3Vue.use(TextViewPlugin);
1<MDTextView helper="example helper" placeholderColor="green" keyboardType="datetime" 2 hint="i am an hint" returnKeyType="next" @focus="onFocus" @blur="onBlur" 3 @textChange="onTextChange"/>
Also, you can bind the text to some instance data using the v-model directive:
1<MDTextView v-model="value" />
API
Attributes
Inherite from NativeScript TextView so it already has all the same attributes.
- variant optional
An attribute to set the variant of the textview. Can be outline or underline or filled. No value means underline textview
- errorColor optional
An attribute to set the error color of the textview.
- helper optional
An attribute to set the helper text of the textview.
- floating optional
A boolean attribute to set the floating state of the textview.
FAQ
Question: How to use the latest version of this plugin for iOS?
Answer: To get latest versions of Material Components for iOS (> 112.1) you will need to change Pod min version to 10.0
To do that modify or create App_Resources/iOS/Podfile to add platform :ios, '10.0'.
You can see an example in the demo-vue app.
Q: How to migrate to AndroidX with this plugin installed (Android only)?
A: For Material Components to work correctly with {N} 6 and AndroidX you need to update your android app theme.
Inside App_resources/android/res/values/styles.xml replace all occurences of Theme.AppCompat with Theme.MaterialComponents
You can see an example in the demo-vue app.
Q: What is the difference between Bottom Navigation and Bottom Navigation Bar component?
A: The Bottom Navigation Bar is a new component to draw a bottom navigation bar in material design. The Bottom Navigation component is a simple extract of the eponymous component from NativeScript, which probably will be removed in the future so this one can be used for easy transition.
Demos and Development
Repo Setup
The repo uses submodules. If you did not clone with --recursive then you need to call
git submodule update --init
The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.
To develop and test:
if you use yarn then run yarn
if you use pnpm then run pnpm i
Interactive Menu:
To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.
Build
1npm run build.all
WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run
Demos
1npm run demo.[ng|react|svelte|vue].[ios|android] 2 3npm run demo.svelte.ios # Example
Demo 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]
Instead you work in demo-snippets/[ng|react|svelte|vue]
You can start from the install.ts of each flavor to see how to register new demos
Contributing
Update repo
You can update the repo files quite easily
First update the submodules
1npm run update
Then commit the changes Then update common files
1npm run sync
Then you can run yarn|pnpm, commit changed files if any
Update readme
1npm run readme
Update doc
1npm run doc
Publish
The publishing is completely handled by lerna (you can add -- --bump major to force a major release)
Simply run
1npm run publish
modifying submodules
The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
One easy solution is t modify ~/.gitconfig and add
[url "ssh://git@github.com/"]
pushInsteadOf = https://github.com/
Questions
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.
No vulnerabilities found.
Reason
22 commit(s) and 3 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0
Reason
Found 2/28 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 4 are checked with a SAST tool
Reason
23 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-p7v2-p9m8-qqg7
- Warn: Project is vulnerable to: GHSA-7x97-j373-85x5
- Warn: Project is vulnerable to: GHSA-7m48-wc93-9g85
- Warn: Project is vulnerable to: GHSA-qqvq-6xgj-jw8g
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-8266-84wp-wv5c
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
3.5
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More