@nativescript-community/ui-material-ripple
v7.2.67
Published
The Material Design Ripple component provides a radial action in the form of a visual ripple expanding outward from the user's touch. Ripple is a visual form of feedback for touch events providing users a clear signal that an element is being touched.
Downloads
4,821
Readme
NativeScript Material Ripple
Material Design's Ripple component for NativeScript.
Contents
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 [email protected]
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.