JSPM – @nativescript-community/ui-material-ripple@5.1.1

Package Exports

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-community/ui-material-ripple) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Installation

Warning ⚠️ ⚠️

From 5.x using material component will break N tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either bottomnavigationbar (this one is the best choice, closest to material design) or tabs (clone of N one, but with a little less features)

For N 7.0

tns plugin add @nativescript-community/ui-material-ripple

For N 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.

Material Design Spec

Usage

Plain NativeScript

IMPORTANT: Make sure you include xmlns:mdr="@nativescript-community/ui-material-ripple" on the Page element

XML

<Page xmlns:mdr="@nativescript-community/ui-material-ripple">
    <StackLayout horizontalAlignment="center">
        <mdr:Ripple rippleColor="green" width="100" height="100" />
   </StackLayout>
</Page>

CSS

mdcripple {
    ripple-color: blue;
}

NativeScript + Angular

import { NativeScriptMaterialRippleModule } from "@nativescript-community/ui-material-ripple/angular";

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

<MDRipple rippleColor="green" width="100" height="100"></MDRipple>

NativeScript + Vue

import Vue from 'nativescript-vue';
import RipplePlugin from '@nativescript-community/ui-material-ripple/vue';

Vue.use(RipplePlugin);

<MDRipple rippleColor="green" width="100" height="100"/>

Attributes

Inherite from Nativescript StackLayout

Attributes

rippleColor optional

An attribute to set the ripple color of the ripple.