README
NativeScript Material Ripple
Material Design's Ripple component for NativeScript.
Contents
Installation
:warning: Warning :warning:
From NativeScript 5.x using this component will break the NativeScript 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 material-tabs (clone of the NativeScript one, but with a little less features).
For NativeScript 7.0+
tns plugin add @nativescript-community/ui-material-ripple
For NativeScript 6.x
tns plugin add nativescript-material-ripple
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
<Page xmlns:mdr="@nativescript-community/ui-material-ripple">
<StackLayout horizontalAlignment="center">
<mdr:Ripple rippleColor="green" width="100" height="100" />
</StackLayout>
</Page>
CSS
mdripple {
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"/>
API
Attributes
Inherite from NativeScript StackLayout.
- rippleColor optional
An attribute to set the ripple color of the ripple.