NativeScript Material Circular progress indicator

Material Design's Circular progress indicator component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue
5. API

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

NativeScript Material Bottom navigation

Material Design's Bottom navigation component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue
   • React
5. API

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://&#xe1b0;" 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://&#xe024;" 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://&#xf03a;" 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://&#xf4b6;" 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://&#xf015;" class="fas"></Image>
7            </MDTabStripItem>
8            <MDTabStripItem class="special">
9                <Label text="Account"></Label>
10                <Image src="font://&#xf007;" class="fas"></Image>
11            </MDTabStripItem>
12            <MDTabStripItem class="special">
13                <Label text="Search"></Label>
14                <Image src="font://&#xf00e;" 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://&#xf015;" class="fas"></Image>
7            </MDTabStripItem>
8            <MDTabStripItem class="special">
9                <Label text="Account"></Label>
10                <Image src="font://&#xf007;" class="fas"></Image>
11            </MDTabStripItem>
12            <MDTabStripItem class="special">
13                <Label text="Search"></Label>
14                <Image src="font://&#xf00e;" 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://&#xf015;" className="fas" />
19                </tabStripItem>
20                <tabStripItem nodeRole="items">
21                    <label nodeRole="label">Account</label>
22                    <image nodeRole="image" src="font://&#xf007;" className="fas" />
23                </tabStripItem>
24                <tabStripItem nodeRole="items">
25                    <label nodeRole="label">Search</label>
26                    <image nodeRole="image" src="font://&#xf00e;" 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:

1. Installed the react-nativescript npm module.
2. Installed the @types/react npm module, strictly with the exact version provided in the React NativeScript starter template.
3. Run the postinstall script that comes with the React NativeScript template – npm run postinstall – to patch @types/react.
4. Registered the component as described above (i.e. import and run the registerTabNavigationBase() and registerBottomNavigation() methods).
5. 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.

API

Attributes

Events

NativeScript Material Bottom navigation bar

Material Design's Bottom navigation component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue
   • CSS Styling
5. API
   • BottomNavigationBar
   • BottomNavigationTab

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

Properties (internal)

Properties accessible through JS/TS instance

Events

Event properties settable thew XML/HTML

Methods

Methods accessible through JS/TS instance

Bottom Navigation Tab

Properties (bindable)

Properties settable through XML/HTML

NativeScript Material Bottom sheet

Material Design's Bottom sheet component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue

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}

NativeScript Material Button

Material Design's Button component for NativeScript.

Contents

• NativeScript Material Button
  • Contents
  • Installation
  • Changelog
  • FAQ
  • Usage
    • Plain NativeScript
      • XML
      • CSS
  • • NativeScript + Angular
  • • NativeScript + Vue
  • API
    • Attributes

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.

NativeScript Material Card

Material Design's Card component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue
5. API

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.

Nativescript Material Core

Core module for all Nativescript material components

Nativescript Material Core

Core module for all Nativescript material components

NativeScript Material Dialogs

Material Design's Dialogs component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage

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

NativeScript Material Floating action button

Material Design's Floating action button component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue
5. API

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.

NativeScript Material Linear progress indicator

Material Design's Linear progress indicator component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue
5. API

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.

NativeScript Material Ripple

Material Design's Ripple component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue
5. API

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.

NativeScript Material Slider

Material Design's Slider component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue
5. API

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.

NativeScript Material Snackbar

Material Design's Snackbar component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage

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

NativeScript Material Speed dial

Material Design's Speed dial component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage

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>

NativeScript Material Switch

Material Design's Switch component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue
5. API

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.

NativeScript Material Tabs

Material Design's Tabs component for NativeScript.

Contents

1. Installation
2. Changelog
3. FAQ
4. Usage
   • Plain NativeScript
   • Angular
   • Vue
   • React
5. API

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://&#xf015;" class="fas"></Image>
8            </TabStripItem>
9            <mdt:TabStripItem> class="special">
10                <Label text="Account"></Label>
11                <Image src="font://&#xf007;" class="fas"></Image>
12            </mdt:TabStripItem>
13            <mdt:TabStripItem> class="special">
14                <Label text="Search"></Label>
15                <Image src="font://&#xf00e;" 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://&#xf015;" class="fas"></Image>
7            </MDTabStripItem>
8            <MDTabStripItem class="special">
9                <Label text="Account"></Label>
10                <Image src="font://&#xf007;" class="fas"></Image>
11            </MDTabStripItem>
12            <MDTabStripItem class="special">
13                <Label text="Search"></Label>
14                <Image src="font://&#xf00e;" 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>