JSPM – nativescript-material-button@3.3.2

Package Exports

nativescript-material-button/vue

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nativescript-material-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Installation

If using @nativescript :

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.

Material Design Spec

Usage

Plain NativeScript

IMPORTANT: Make sure you include xmlns:mdb="nativescript-material-button" on the Page element

XML

<Page xmlns:mdb="nativescript-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>

CSS

mdbutton {
    ripple-color: blue;
    elevation: 4;
}

NativeScript + Angular

import { NativeScriptMaterialButtonModule } from "nativescript-material-button/angular";

@NgModule({
    imports: [
        NativeScriptMaterialButtonModule,
        ...
    ],
    ...
})

<MDButton rippleColor="blue" text="text button"></MDButton>

NativeScript + Vue

import Vue from 'nativescript-vue';
import ButtonPlugin from 'nativescript-material-button/vue';

Vue.use(ButtonPlugin);

<MDButton rippleColor="blue" text="text button"/>

Attributes

Inherite from Nativescript Button so it already has all the same attributes

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.