Build beautiful, usable products using Material Components for NativeScript.
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.
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
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
import { themer } from '@nativescript-community/ui-material-core';
if (global.isIOS) {
themer.setPrimaryColor('#bff937');
themer.setAccentColor('#ff8a39');
themer.setSecondaryColor('#a830d7');
}
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.
import { installMixins } from '@nativescript-community/ui-material-core';
installMixins();
This monorepo contains multiple packages:
activityindicator
Material Design's Circular progress indicator component for NativeScript.
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.
IMPORTANT: Make sure you include xmlns:mda="@nativescript-community/ui-material-activityindicator"
on the Page element.
<Page xmlns:mda="@nativescript-community/ui-material-activityindicator">
<StackLayout horizontalAlignment="center">
<mda:ActivityIndicator busy="true"/>
</StackLayout>
</Page>
mdactivityindicator {
color: #fff;
}
import { NativeScriptMaterialActivityIndicatorModule } from "@nativescript-community/ui-material-activityindicator/angular";
@NgModule({
imports: [
NativeScriptMaterialActivityIndicatorModule,
...
],
...
})
<MDActivityIndicator busy="true"></MDActivityIndicator>
import Vue from 'nativescript-vue';
import ActivityIndicatorPlugin from '@nativescript-community/ui-material-activityindicator/vue';
Vue.use(ActivityIndicatorPlugin);
<MDActivityIndicator busy="true"/>
Inherite from NativeScript Activity Indicator so it already has all the same attributes
bottom-navigation
Material Design's Bottom navigation component for NativeScript.
ns plugin add @nativescript-community/ui-material-bottom-navigation
Be sure to run a new build after adding plugins to avoid any issues.
IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-bottom-navigation"
on the Page element.
<Page xmlns:mdt="@nativescript-community/ui-material-bottom-navigation">
<mdt:BottomNavigation width="100%" id="main-tabview" class="main-tabview"
selectedIndexChanged="onSelectedIndexChanged"
iosOverflowSafeArea="true" selectedIndex="0" tabsPosition="bottom" swipeEnabled="false">
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
<mdt:TabStrip backgroundColor="color('dark')" color="color('blue')">
<mdt:TabStripItem class="tab-item">
<Image src="font://" class="fal"></Image>
<Label text="Home" ios:fontSize="10" android:fontSize="12"></Label>
</mdt:TabStripItem>
<mdt:TabStripItem class="tab-item">
<Label text="L('search')" ios:fontSize="10" android:fontSize="12"></Label>
<Image src="font://" class="fal"></Image>
</mdt:TabStripItem>
<mdt:TabStripItem class="tab-item">
<Label text="L('trips')" ios:fontSize="10" android:fontSize="12"></Label>
<Image src="font://" class="fal"></Image>
</mdt:TabStripItem>
<mdt:TabStripItem class="tab-item">
<Label text="L('inbox')" ios:fontSize="10" android:fontSize="12"></Label>
<Image src="font://" class="fal" id="tab-inbox-icon-fal"></Image>
</mdt:TabStripItem>
</mdt:TabStrip>
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
<mdt:TabContentItem>
<GridLayout>
<Label text="Home" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
<mdt:TabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
<mdt:TabContentItem>
<GridLayout>
<Label text="TRansactions" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
<mdt:TabContentItem>
<GridLayout>
<Label text="Inbox" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
</mdt:BottomNavigation>
</Page>
BottomNavigation.bottom-nav {
background-color: orangered;
color: gold;
font-size: 18;
}
MDTabStripItem.tabstripitem-active {
background-color: teal;
}
MDTabStripItem.tabstripitem-active:active {
background-color: yellowgreen;
}
MDTabContentItem.first-tabcontent {
background-color: seashell;
color: olive;
}
MDTabContentItem.second-tabcontent {
background-color: slategray;
color: aquamarine;
}
MDTabContentItem.third-tabcontent {
background-color: blueviolet;
color: antiquewhite;
}
BottomNavigation TabStrip {
highlight-color: red;
}
import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-bottom-navigation/angular";
@NgModule({
imports: [
NativeScriptMaterialBottomNavigationModule,
...
],
...
})
<MDBottomNavigation selectedIndex="1">
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
<MDTabStrip>
<MDTabStripItem>
<Label text="Home"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Account"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Search"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
</MDTabStrip>
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
<MDTabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
</MDBottomNavigation>
import BottomNavigation from '@nativescript-community/ui-material-bottom-navigation/vue';
Vue.use(BottomNavigation);
<MDBottomNavigation selectedIndex="1">
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
<MDTabStrip>
<MDTabStripItem>
<Label text="Home"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Account"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Search"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
</MDTabStrip>
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
<MDTabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
</MDBottomNavigation>
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:
import { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react';
import { registerBottomNavigation } from '@nativescript-community/ui-material-bottom-navigation/react';
registerTabNavigationBase();
registerBottomNavigation();
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:
import * as React from 'react';
export function BottomNavigation() {
const [selectedIndex, setSelectedIndex] = React.useState(0);
return (
<bottomNavigation
selectedIndex={selectedIndex}
onSelectedIndexChanged={(args) => {
setSelectedIndex(args.newIndex);
}}
style={{ backgroundColor: 'orange' }}
>
{/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
<tabStrip nodeRole="tabStrip" style={{ backgroundColor: 'red' }}>
<tabStripItem nodeRole="items">
<label nodeRole="label">Home</label>
<image nodeRole="image" src="font://" className="fas" />
</tabStripItem>
<tabStripItem nodeRole="items">
<label nodeRole="label">Account</label>
<image nodeRole="image" src="font://" className="fas" />
</tabStripItem>
<tabStripItem nodeRole="items">
<label nodeRole="label">Search</label>
<image nodeRole="image" src="font://" className="fas" />
</tabStripItem>
</tabStrip>
{/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
<tabContentItem nodeRole="items">
<gridLayout style={{ backgroundColor: 'blue' }}>
<label style={{ color: 'white' }}>Home Page</label>
</gridLayout>
</tabContentItem>
<tabContentItem nodeRole="items">
<gridLayout style={{ backgroundColor: 'cyan' }}>
<label style={{ color: 'black' }}>Account Page</label>
</gridLayout>
</tabContentItem>
<tabContentItem nodeRole="items">
<gridLayout style={{ backgroundColor: 'magenta' }}>
<label style={{ color: 'black' }}>Search Page</label>
</gridLayout>
</tabContentItem>
</bottomNavigation>
);
}
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-nativescript
npm module. - Installed the
@types/react
npm 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/react
to jump to the file; opening the file will force it to load its provided typings.
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 |
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
Material Design's Bottom navigation component for NativeScript.
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.
Before start using the plugin you need to add the icons for Android & iOS in your App_Resources
directory.
You can set the tabs using the tabs
property
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:mdc="@nativescript-community/ui-material-bottomnavigationbar"
loaded="pageLoaded"
class="page">
<GridLayout rows="*, auto">
<StackLayout row="0">
<Label text="content"></Label>
</StackLayout>
<mdc:BottomNavigationBar
tabs="tabs"
activeColor="green"
inactiveColor="red"
backgroundColor="black"
tabSelected="tabSelected"
row="1"
></mdc:BottomNavigationBar>
</GridLayout>
</Page>
import { EventData } from '@nativescript/core/data/observable';
import { Page } from '@nativescript/core/ui/page';
import { BottomNavigationTab, TabSelectedEventData } from '@nativescript-community/ui-material-bottomnavigationbar';
// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: EventData) {
// Get the event sender
let page = <Page>args.object;
page.bindingContext = {
tabs: [
new BottomNavigationTab({ title: 'First', icon: 'res://ic_home' }),
new BottomNavigationTab({
title: 'Second',
icon: 'res://ic_view_list',
isSelectable: false
}),
new BottomNavigationTab({ title: 'Third', icon: 'res://ic_menu' })
]
};
}
export function tabSelected(args: TabSelectedEventData) {
console.log('tab selected ' + args.newIndex);
}
or you can add the tabs directly in your xml view
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:mdc="@nativescript-community/ui-material-bottomnavigationbar"
loaded="pageLoaded"
class="page">
<GridLayout rows="*, auto">
<StackLayout row="0">
<Label text="content"></Label>
</StackLayout>
<mdc:BottomNavigationBar
activeColor="green"
inactiveColor="red"
backgroundColor="black"
tabSelected="tabSelected"
row="1"
>
<mdc:BottomNavigationTab title="First" icon="res://ic_home" />
<mdc:BottomNavigationTab title="Second" icon="res://ic_view_list" isSelectable="false" />
<mdc:BottomNavigationTab title="Third" icon="res://ic_menu" />
    </mdc:BottomNavigationBar>
</GridLayout>
</Page>
First you need to include the NativeScriptMaterialBottomNavigationBarModule
in your app.module.ts
import { NativeScriptMaterialBottomNavigationBarModule} from "@nativescript-community/ui-material-bottomnavigationbar/angular";
@NgModule({
imports: [
NativeScriptMaterialBottomNavigationBarModule
],
...
})
<GridLayout rows="*, auto">
<StackLayout row="0">
<label text="content"></label>
</StackLayout>
<BottomNavigationBar
[tabs]="tabs"
activeColor="red"
inactiveColor="yellow"
backgroundColor="black"
(tabSelected)="onBottomNavigationTabSelected($event)"
(tabPressed)="onBottomNavigationTabPressed($event)"
row="1"
></BottomNavigationBar>
</GridLayout>
or you can declare the BottomNavigationTab
in your html directly
<GridLayout rows="*, auto">
<StackLayout row="0">
<label text="content"></label>
</StackLayout>
<BottomNavigationBar
activeColor="red"
inactiveColor="yellow"
backgroundColor="black"
(tabSelected)="onBottomNavigationTabSelected($event)"
(tabPressed)="onBottomNavigationTabPressed($event)"
row="1"
>
<BottomNavigationTab title="First" icon="res://ic_home"></BottomNavigationTab>
<BottomNavigationTab title="Second" icon="res://ic_view_list" [isSelectable]="false"></BottomNavigationTab>
<BottomNavigationTab title="Third" icon="res://ic_menu"></BottomNavigationTab>
</BottomNavigationBar>
</GridLayout>
If you want to use this plugin with Vue, do this in your app.js
or main.js
:
import BottomNavigationBar from '@nativescript-community/ui-material-bottomnavigationbar/vue';
Vue.use(BottomNavigationBar);
This will install and register BottomNavigationBar
and BottomNavigationTab
components to your Vue
instance and now you can use the plugin as follows:
<GridLayout rows="*, auto">
<StackLayout row="0">
<label text="content"></label>
</StackLayout>
<MDBottomNavigationBar activeColor="red" inactiveColor="yellow" backgroundColor="black" @tabSelected="onBottomNavigationTabSelected" row="1">
<MDBottomNavigationTab title="First" icon="ic_home" />
<MDBottomNavigationTab title="Second" icon="ic_view_list" isSelectable="false" />
<MDBottomNavigationTab title="Third" icon="ic_menu" />
</MDBottomNavigationBar>
</GridLayout>
You can find more information of how to use nativescript plugins with Vue Here!
You can also use your css file to set or change the activeColor
, inactiveColor
& backgroundColor
of the Bottom Navigation Bar.
.botom-nav {
active-color: green;
inactive-color: black;
background-color: blue;
}
- Properties (bindable): Properties settable through XML/HTML
- Properties (internal): Properties accessible through JS/TS instance
- Events: Event properties settable thew XML/HTML
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 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 |
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 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 |
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
Material Design's Bottom sheet component for NativeScript.
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.
export interface BottomSheetOptions {
view: string | ViewBase;
// View instance to be shown in bottom sheet. Or the name of the module to load starting from the application root.
context?: any;
// 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.
animated?: boolean;
// An optional parameter specifying whether to show the sheet view with animation.
dismissOnBackgroundTap?: boolean;
// An optional parameter specifying whether to dismiss the sheet when clicking on background.
dismissOnDraggingDownSheet?: boolean;
// An optional parameter specifying whether to disable dragging the sheet to dismiss.
dismissOnBackButton?: boolean;
// An optional parameter that specifies whether to close the sheet when pressing the back button.
closeCallback?: Function;
// A function that will be called when the view is closed. Any arguments provided when calling shownInBottomSheet.closeCallback will be available here.
trackingScrollView?: string;
// optional id of the scroll view to track
transparent?: boolean;
// optional parameter to make the bottomsheet transparent
ignoreTopSafeArea?: boolean;
// optional ios parameter to top safe area. Default is true
ignoreBottomSafeArea?: boolean;
// optional ios parameter to bottom safe area. Default is false
disableDimBackground?: boolean;
// optional parameter to remove the dim background
skipCollapsedState?: boolean;
// optional Android parameter to skip midway state when view is greater than 50%. Default is false
peekHeight?: number;
// 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
ignoreKeyboardHeight?: boolean;
//(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)
onChangeState?: onChangeStateBottomSheet;
// 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.
canTouchBehind?: boolean //(Android only) allows to interact with the screen behind the sheet. For it to work properly need dismissOnBackgroundTap set to true.
}
We need to do some wiring when your app starts, so open app.js
and add this before creating any View/App/Frame:
var material = require("@nativescript-community/ui-material-bottomsheet");
material.install();
import { install } from "@nativescript-community/ui-material-bottomsheet";
install();
Uses the same kind of API as NativeScript Modals.
const modalViewModulets = "ns-ui-category/modal-view/basics/modal-ts-view-page";
export function openBottomSheet(args) {
const mainView: Button = <Button>args.object;
const context = { username: "test_username", password: "test" };
const fullscreen = true;
mainView.showBottomSheet({
view: modalViewModulets,
context,
closeCallback: (username, password) => {
bottom-sheet
alert(`Username: ${username} : Password: ${password}`);
},
fullscreen
});
}
import Vue from 'nativescript-vue';
import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
import { install } from "@nativescript-community/ui-material-bottomsheet";
install();
Vue.use(BottomSheetPlugin);
Then you can show a Vue component:
import MyComponent from 'MyComponent.vue';
//inside another Vue component
const options: VueBottomSheetOptions = {
// props to be passed to MyComponent
props: {
someProp: true,
anotherProp: false
},
// listeners to be connected to MyComponent
on: {
someEvent: (value) => { console.log(value) }
}
};
this.$showBottomSheet(MyComponent, options)
import { createApp } from 'nativescript-vue';
import { BottomSheetPlugin } from '@nativescript-community/ui-material-bottomsheet/vue3';
import { install } from "@nativescript-community/ui-material-bottomsheet";
install();
const app = createApp(...);
app.use(BottomSheetPlugin);
Then you can show a Vue component:
import { useBottomSheet } from "@nativescript-community/ui-material-bottomsheet/vue3";
import MyComponent from 'MyComponent.vue';
const options: VueBottomSheetOptions = {
// props to be passed to MyComponent
props: {
someProp: true,
anotherProp: false
},
// listeners to be connected to MyComponent
on: {
someEvent: (value) => { console.log(value) }
}
};
const { showBottomSheet, closeBottomSheet } = useBottomSheet()
showBottomSheet(MyComponent, options);
closeBottomSheet();
First you need to include the NativeScriptMaterialBottomSheetModule
in your app.module.ts
import { NativeScriptMaterialBottomSheetModule} from "@nativescript-community/ui-material-bottomsheet/angular";
@NgModule({
imports: [
// This will call the install method and inject a global service called BottomSheetService
NativeScriptMaterialBottomSheetModule.forRoot()
],
...
})
now you can show your custom BottomSheet using the BottomSheetService
, this service follows the same implementation as the ModalService
import { Component, ViewContainerRef } from '@angular/core';
import { BottomSheetOptions, BottomSheetService } from '@nativescript-community/ui-material-bottomsheet/angular';
import { ShareOptionsComponent } from './share-options.component';
@Component({
selector: 'ns-item',
templateUrl: './item.component.html',
moduleId: module.id
})
export class ItemComponent {
constructor(
private bottomSheet: BottomSheetService,
private containerRef: ViewContainerRef,
) {}
showOptions() {
const options: BottomSheetOptions = {
viewContainerRef: this.containerRef,
context: ['Facebook', 'Google', 'Twitter']
};
this.bottomSheet.show(ShareOptionsComponent, options).subscribe(result => {
console.log('Option selected:', result);
});
}
}
<ListView
[items]="options"
(itemTap)="onTap($event)"
separatorColor="white"
class="list-group"
height="200"
>
<ng-template let-option="item">
<Label
class="list-group-item"
[text]="option"
></Label>
</ng-template>
</ListView>
import { Component, OnInit } from '@angular/core';
import { BottomSheetParams } from '@nativescript-community/ui-material-bottomsheet/angular';
import { ItemEventData } from '@nativescript/core/ui/list-view';
@Component({
selector: 'ns-share-options',
templateUrl: 'share-options.component.html'
})
export class ShareOptionsComponent implements OnInit {
options: string[];
// The BottomSheetService injects the BottomSheetParams to the component
// so you can get the context and call the closeCallback method from the component displayed in your BottomSheet
constructor(private params: BottomSheetParams) {}
ngOnInit() {
this.options = this.params.context;
}
onTap({ index }: ItemEventData) {
this.params.closeCallback(this.options[index]);
}
}
button
Material Design's Button component for NativeScript.
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.
IMPORTANT: Make sure you include xmlns:mdb="@nativescript-community/ui-material-button"
on the Page element
<Page xmlns:mdb="@nativescript-community/ui-material-button">
<StackLayout horizontalAlignment="center">
<mdb:Button text="raised button"/>
<mdb:Button variant="flat" text="flat button"/>
<mdb:Button variant="text" text="text button"/>
<mdb:Button elevation="5" rippleColor="red" text="raised custom button"/>
</StackLayout>
</Page>
mdbutton {
ripple-color: blue;
elevation: 4;
}
import { NativeScriptMaterialButtonModule } from "@nativescript-community/ui-material-button/angular";
@NgModule({
imports: [
NativeScriptMaterialButtonModule,
...
],
...
})
<MDButton rippleColor="blue" text="text button"></MDButton>
import Vue from 'nativescript-vue';
import ButtonPlugin from '@nativescript-community/ui-material-button/vue';
Vue.use(ButtonPlugin);
<MDButton rippleColor="blue" text="text button"/>
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
Material Design's Card component for NativeScript.
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.
IMPORTANT: Make sure you include xmlns:mdc="@nativescript-community/ui-material-cardview"
on the Page element
<Page xmlns:mdc="@nativescript-community/ui-material-cardview">
<StackLayout horizontalAlignment="center">
<mdc:CardView width="100" height="100"/>
<mdc:CardView elevation="5" rippleColor="red" width="100" height="100"/>
</StackLayout>
</Page>
mdcardview {
ripple-color: blue;
elevation: 4;
}
import { NativeScriptMaterialCardViewModule } from "@nativescript-community/ui-material-cardview/angular";
@NgModule({
imports: [
NativeScriptMaterialCardViewModule,
...
],
...
})
<MDCardView rippleColor="blue" width="100" height="100"></MDCardView>
import Vue from 'nativescript-vue';
import CardViewPlugin from '@nativescript-community/ui-material-cardview/vue';
Vue.use(CardViewPlugin);
<MDCardView rippleColor="blue" width="100" height="100"/>
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
Material Design's Dialogs component for NativeScript.
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.
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.
import { login, alert, prompt } from "@nativescript-community/ui-material-dialogs";
alert("Your message").then(()=> {
console.log("Dialog closed!");
});
floatingactionbutton
Material Design's Floating action button component for NativeScript.
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.
IMPORTANT: Make sure you include xmlns:mdf="@nativescript-community/ui-material-floatingactionbutton"
on the Page element
<Page xmlns:mdf="@nativescript-community/ui-material-floatingactionbutton">
<StackLayout horizontalAlignment="center">
<mdf:FloatingActionButton src="res://ic_action_add"/>
<mdf:FloatingActionButton elevation="5" src="res://ic_action_add"/>
</StackLayout>
</Page>
mdfloatingactionbutton {
ripple-color: blue;
elevation: 4;
}
import { registerElement } from '@nativescript/angular/element-registry';
import { FloatingActionButton } from '@nativescript-community/ui-material-floatingactionbutton';
registerElement('MDFloatingActionButton', () => FloatingActionButton);
<MDFloatingActionButton rippleColor="blue" src="res://ic_action_add"></MDFloatingActionButton>
import Vue from 'nativescript-vue';
import FloatingActionButtonPlugin from '@nativescript-community/ui-material-floatingactionbutton/vue';
Vue.use(FloatingActionButtonPlugin);
<MDFloatingActionButton rippleColor="blue" src="res://ic_action_add"/>
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
Material Design's Linear progress indicator component for NativeScript.
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.
IMPORTANT: Make sure you include xmlns:mdp="@nativescript-community/ui-material-progress"
on the Page element
<Page xmlns:mdp="@nativescript-community/ui-material-progress">
<StackLayout horizontalAlignment="center">
<mdp:Progress value="50" maxValue="100"/>
</StackLayout>
</Page>
mdprogress {
ripple-color: blue;
elevation: 4;
}
import { NativeScriptMaterialProgressModule } from "@nativescript-community/ui-material-progress/angular";
@NgModule({
imports: [
NativeScriptMaterialProgressModule,
...
],
...
})
<MDProgress v-model="value" maxValue="100"></MDProgress>
import ProgressPlugin from '@nativescript-community/ui-material-progress/vue';
Vue.use(ProgressPlugin);
<MDProgress value="50" maxValue="100"></MDProgress>
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
Material Design's Ripple component for NativeScript.
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.
IMPORTANT: Make sure you include xmlns:mdr="@nativescript-community/ui-material-ripple"
on the Page element
<Page xmlns:mdr="@nativescript-community/ui-material-ripple">
<StackLayout horizontalAlignment="center">
<mdr:Ripple rippleColor="green" width="100" height="100" />
</StackLayout>
</Page>
mdripple {
ripple-color: blue;
}
import { NativeScriptMaterialRippleModule } from "@nativescript-community/ui-material-ripple/angular";
@NgModule({
imports: [
NativeScriptMaterialRippleModule,
...
],
...
})
<MDRipple rippleColor="green" width="100" height="100"></MDRipple>
import Vue from 'nativescript-vue';
import RipplePlugin from '@nativescript-community/ui-material-ripple/vue';
Vue.use(RipplePlugin);
<MDRipple rippleColor="green" width="100" height="100"/>
Inherite from NativeScript StackLayout.
- rippleColor optional
An attribute to set the ripple color of the ripple.
slider
Material Design's Slider component for NativeScript.
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.
IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-slider"
on the Page element.
<Page xmlns:mds="@nativescript-community/ui-material-slider">
<StackLayout horizontalAlignment="center">
<mds:Slider value="50" minValue="0" maxValue="100" />
</StackLayout>
</Page>
mdslider {
ripple-color: blue;
elevation: 4;
}
import { NativeScriptMaterialSliderModule } from "@nativescript-community/ui-material-slider/angular";
@NgModule({
imports: [
NativeScriptMaterialSliderModule,
...
],
...
})
<MDSlider value="50" minValue="0" maxValue="100"></MDSlider>
import SliderPlugin from '@nativescript-community/ui-material-slider/vue';
Vue.use(SliderPlugin);
<MDSlider value="50" minValue="0" maxValue="100" @valueChange="onValueChanged"/>
Or you can bind the value to some instance data using the v-model
directive:
<MDSlider v-model="value" minValue="0" maxValue="100"/>
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
Material Design's Snackbar component for NativeScript.
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.
import { SnackBar } from '@nativescript-community/ui-material-snackbar';
const snackbar = new SnackBar();
export function showSimpleSnackbar() {
snackbar.simple(`I'm a simple snackbar`).then(result => console.log('Simple Snackbar:', result));
}
export function showActionSnackbar() {
snackbar
.action({
message: `I'm a snackbar with an action`,
actionText: 'Dismiss',
hideDelay: 2000
})
.then(result => console.log('Action Snackbar:', result));
}
export function showColorfulSnackbar() {
snackbar
.action({
message: `I'm a colorful snackbar`,
textColor: 'blue',
actionTextColor: 'yellow',
backgroundColor: 'green',
actionText: 'Dismiss',
hideDelay: 2000
})
.then(result => console.log('Action Snackbar:', result));
}
speeddial
Material Design's Speed dial component for NativeScript.
ns plugin add @nativescript-community/ui-material-speeddial
Be sure to run a new build after adding plugins to avoid any issues.
import Vue from 'nativescript-vue';
import speeddialPlugin from '@nativescript-community/ui-material-speeddial/vue';
Vue.use(speeddialPlugin);
<MDSpeedDial buttonFontSize="26" text="mdi-one-up" buttonClass="mdi" buttonBackgroundColor="yellow" @tap="onTap">
<MDSpeedDialItem icon="res://ic_action_add" title="test1" backgroundColor="red" @tap="onTap"/>
<MDSpeedDialItem text="mdi-card-account-mail" title="test2" buttonClass="mdi" backgroundColor="green" @tap="onTap"/>
<MDSpeedDialItem backgroundImage="~/images/iu.jpg" backgroundColor="blue" @tap="onTap"/>
<MDSpeedDialItem icon="res://ic_action_add" title="test4" backgroundColor="orange" @tap="onTap"/>
</MDSpeedDial>
switch
Material Design's Switch component for NativeScript.
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.
IMPORTANT: Make sure you include xmlns:mdp="@nativescript-community/ui-material-progress"
on the Page element
<Page xmlns:mdp="@nativescript-community/ui-material-switch">
<StackLayout horizontalAlignment="center">
<mdp:Switch />
</StackLayout>
</Page>
mdswitch{
ripple-color: blue;
elevation: 4;
}
import { NativeScriptMaterialSwitchModule } from "@nativescript-community/ui-material-switch/angular";
@NgModule({
imports: [
NativeScriptMaterialSwitchModule,
...
],
...
})
<MDSwitch v-model="value"></MDSwitch>
import SwitchPlugin from '@nativescript-community/ui-material-switch/vue';
Vue.use(SwitchPlugin);
<MDSwitch></MDSwitch>
Inherits from NativeScript Switch so it already has all the same attributes.
tabs
Material Design's Tabs component for NativeScript.
ns plugin add @nativescript-community/ui-material-tabs
Be sure to run a new build after adding plugins to avoid any issues.
IMPORTANT: Make sure you include xmlns:mds="@nativescript-community/ui-material-tabs"
on the Page element.
<Page xmlns:mdt="@nativescript-community/ui-material-tabs">
<mdt:Tabs selectedIndex="1">
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
<mdt:TabStrip>
<mdt:TabStripItem>
<Label text="Home"></Label>
<Image src="font://" class="fas"></Image>
</TabStripItem>
<mdt:TabStripItem> class="special">
<Label text="Account"></Label>
<Image src="font://" class="fas"></Image>
</mdt:TabStripItem>
<mdt:TabStripItem> class="special">
<Label text="Search"></Label>
<Image src="font://" class="fas"></Image>
</mdt:TabStripItem>
</mdt:TabStrip>
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
<mdt:TabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
<mdt:TabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
<mdt:TabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</mdt:TabContentItem>
</mdt:Tabs>
</Page>
Tabs.bottom-nav {
background-color: orangered;
color: gold;
font-size: 18;
}
TabStripItem.tabstripitem-active {
background-color: teal;
}
TabStripItem.tabstripitem-active:active {
background-color: yellowgreen;
}
TabContentItem.first-tabcontent {
background-color: seashell;
color: olive;
}
TabContentItem.second-tabcontent {
background-color: slategray;
color: aquamarine;
}
TabContentItem.third-tabcontent {
background-color: blueviolet;
color: antiquewhite;
}
Tabs MDTabStrip {
highlight-color: red;
}
import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-tabs/angular";
@NgModule({
imports: [
NativeScriptMaterialTabsModule,
...
],
...
})
<MDTabs selectedIndex="1">
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
<MDTabStrip>
<MDTabStripItem>
<Label text="Home"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Account"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Search"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
</MDTabStrip>
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
<MDTabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
</MDTabs>
import TabsPlugin from '@nativescript-community/ui-material-tabs/vue';
Vue.use(TabsPlugin);
<MDTabs selectedIndex="1">
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
<MDTabStrip>
<MDTabStripItem>
<Label text="Home"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Account"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
<MDTabStripItem class="special">
<Label text="Search"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
</MDTabStrip>
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
<MDTabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
<MDTabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</MDTabContentItem>
</MDTabs>
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:
import { registerTabNavigationBase } from '@nativescript-community/ui-material-core/tab-navigation-base/react';
import { registerTabs } from '@nativescript-community/ui-material-tabs/react';
registerTabNavigationBase();
registerTabs();
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:
import * as React from 'react';
export function Tabs() {
const [selectedIndex, setSelectedIndex] = React.useState(0);
return (
<tabs
selectedIndex={selectedIndex}
onSelectedIndexChanged={(args) => {
setSelectedIndex(args.newIndex);
}}
style={{ backgroundColor: 'orange' }}
>
{/* The bottomTab UI is created via tabStrip (the container) and tabStripItem (for each tab) */}
<tabStrip nodeRole="tabStrip" style={{ backgroundColor: 'red' }}>
<tabStripItem nodeRole="items">
<label nodeRole="label">Home</label>
<image nodeRole="image" src="font://" className="fas" />
</tabStripItem>
<tabStripItem nodeRole="items">
<label nodeRole="label">Account</label>
<image nodeRole="image" src="font://" className="fas" />
</tabStripItem>
<tabStripItem nodeRole="items">
<label nodeRole="label">Search</label>
<image nodeRole="image" src="font://" className="fas" />
</tabStripItem>
</tabStrip>
{/* The number of tabContentItem components should corespond to the number of TabStripItem components */}
<tabContentItem nodeRole="items">
<gridLayout style={{ backgroundColor: 'blue' }}>
<label style={{ color: 'white' }}>Home Page</label>
</gridLayout>
</tabContentItem>
<tabContentItem nodeRole="items">
<gridLayout style={{ backgroundColor: 'cyan' }}>
<label style={{ color: 'black' }}>Account Page</label>
</gridLayout>
</tabContentItem>
<tabContentItem nodeRole="items">
<gridLayout style={{ backgroundColor: 'magenta' }}>
<label style={{ color: 'black' }}>Search Page</label>
</gridLayout>
</tabContentItem>
</tabs>
);
}
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-nativescript
npm module. - Installed the
@types/react
npm 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/react
to jump to the file; opening the file will force it to load its provided typings.
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 |
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
Material Design's Text field component for NativeScript.
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.
IMPORTANT: Make sure you include xmlns:mdt="@nativescript-community/ui-material-textfield"
on the Page element.
<Page xmlns:mdt="@nativescript-community/ui-material-textfield">
<StackLayout horizontalAlignment="center">
<mdt:TextField text="raised textfield"/>
<mdt:TextField variant="flat" text="flat textfield"/>
<mdt:TextField variant="text" text="text textfield"/>
<mdt:TextField elevation="5" rippleColor="red" text="raised custom textfield"/>
</StackLayout>
</Page>
mdtextfield {
ripple-color: blue;
elevation: 4;
stroke-color: blue; /* the border color when active */
stroke-inactive-color: green; /* the border color when inactive */
floating-color: blue; /* the floating placeholder color when active */
floating-inactive-color: green; /* the floating placeholder color when inactive */
}
import { NativeScriptMaterialTextFieldModule } from "@nativescript-community/ui-material-textfield/angular";
@NgModule({
imports: [
NativeScriptMaterialTextFieldModule,
...
],
...
})
<MDTextField helper="example helper" placeholderColor="green" keyboardType="datetime"
hint="i am an hint" returnKeyType="next" (focus)="onFocus($event)" (blur)="onBlur($event)"
(textChange)="onTextChange($event)"></MDTextField>
import TextFieldPlugin from '@nativescript-community/ui-material-textfield/vue';
Vue.use(TextFieldPlugin);
<MDTextField helper="example helper" placeholderColor="green" keyboardType="datetime"
hint="i am an hint" returnKeyType="next" @focus="onFocus" @blur="onBlur"
@textChange="onTextChange"/>
Also, you can bind the text to some instance data using the v-model
directive:
<MDTextField v-model="value" />
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
Material Design's Text view component for NativeScript.
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.
IMPORTANT: Make sure you include xmlns:mdt="@nativescript-community/ui-material-textview"
on the Page element.
<Page xmlns:mdt="@nativescript-community/ui-material-textview">
<StackLayout horizontalAlignment="center">
<mdt:TextView text="raised textview"/>
<mdt:TextView variant="flat" text="flat textview"/>
<mdt:TextView variant="text" text="text textview"/>
<mdt:TextView elevation="5" rippleColor="red" text="raised custom textview"/>
</StackLayout>
</Page>
mdtextview {
ripple-color: blue;
elevation: 4;
stroke-color: blue; /* the border color when active */
stroke-inactive-color: green; /* the border color when inactive */
floating-color: blue; /* the floating placeholder color when active */
floating-inactive-color: green; /* the floating placeholder color when inactive */
}
import { NativeScriptMaterialTextViewModule } from "@nativescript-community/ui-material-textview/angular";
@NgModule({
imports: [
NativeScriptMaterialTextViewModule,
...
],
...
})
<MDTextView helper="example helper" placeholderColor="green" keyboardType="datetime"
hint="i am an hint" returnKeyType="next" (focus)="onFocus($event)" (blur)="onBlur($event)"
(textChange)="onTextChange($event)"></MDTextView>
import TextViewPlugin from '@nativescript-community/ui-material-textview/vue';
Vue.use(TextViewPlugin);
<MDTextView helper="example helper" placeholderColor="green" keyboardType="datetime"
hint="i am an hint" returnKeyType="next" @focus="onFocus" @blur="onBlur"
@textChange="onTextChange"/>
Also, you can bind the text to some instance data using the v-model
directive:
<MDTextView v-model="value" />
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.
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.
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.
npm 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
npm run demo.[ng|react|svelte|vue].[ios|android]
npm 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
You can update the repo files quite easily
First update the submodules
npm run update
Then commit the changes Then update common files
npm run sync
Then you can run yarn|pnpm
, commit changed files if any
npm run readme
npm run doc
The publishing is completely handled by lerna
(you can add -- --bump major
to force a major release)
Simply run
npm run publish
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/
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.