Angular directive to enable ripple effects on touch.
npm install nativescript-rippleThis plugin aims to bring a native (or close to native) ripple implementation on Android and iOS. The android version uses a RippleDrawable and conserves the previous background, as well as CSS styles.
``javascript`
tns plugin add @edusperoni/nativescript-rippleUsage
This will only work on Android Lollipop 5.0 or later and any version of iOS.
ENSURE TO BIND A TAP LISTENER TO THE CHILD ELEMENT, OR THIS WON'T WORK ON ANDROID
`html
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:RL="@edusperoni/nativescript-ripple">
`
rippleColor sets the ripple color. Examples: "#ffffff" | "rgba(255,255,255,0.5)".
rippleColorAlpha sets the ripple color alpha (multiplicative). Default: 0.25. NOTE: This is multiplicative to a 0.5 alpha given by the native class RippleDrawable. This same value is hardcoded in iOS to make both platforms behave the same.
rippleLayer sets the layer the ripple is applied to (ANDROID ONLY). Allowed values: foreground (default on API>=23) | background. Setting this to background will make the ripple only appear on the View's background (meaning it won't appear in front of an image, for example).
rippleEnabled can be set to "false" (rippleEnabled="false") to disable the ripple. This will also disable ripple effects on Views that have them natively (like Button).
#### Import the NgRippleModule
If you're using other modules that change the background (like https://github.com/Especializa/nativescript-ng-shadow), ensure to import it LAST, otherwise the Ripple background will be overwritten.
`
import { NgRippleModule } from '@edusperoni/nativescript-ripple/angular';
@NgModule({
imports: [
NgRippleModule,
// ...
],
// ...
})
export class MyModule { }
`
#### Use it in the templates:
ENSURE TO BIND A TAP LISTENER, OR THIS WON'T WORK ON ANDROID
``
`html`
#### Implementation details
On Android, if the view does not have a background, we assign a transparent one. Otherwise, turning the screen off and then on again makes the background the same as the mask color (black).
rippleColor sets the ripple color. Examples: "#ffffff" | "rgba(255,255,255,0.5)".
rippleColorAlpha sets the ripple color alpha (multiplicative). Default: 0.25. NOTE: This is multiplicative to a 0.5 alpha given by the native class RippleDrawable. This same value is hardcoded in iOS to make both platforms behave the same.
rippleLayer sets the layer the ripple is applied to (ANDROID ONLY). Allowed values: foreground (default on API>=23) | background. Setting this to background will make the ripple only appear on the View's background (meaning it won't appear in front of an image, for example).
ripple can be set to "off" (ripple="off") to disable the ripple. This will also disable ripple effects on Views that have them natively (like Button).
#### No Ripple on Android
If your Ripple is not working on Android, try the following:
1. Verify the view you're applying the Ripple to has a tap eventforeground
2. If the view is a Text-like view (Buttons, Labels, etc), there is a bug that prevents any to be applied to it when textWrap is not true and textAlignment is center or right. There are many fixes (only one is needed):GridLayout
1. Wrap the View in another layout (like a )rippleLayer
2. Change the to backgroundtextWrap="true"
3. Use HorizontallyScrolling
4. Disable for your View (yourLabel.android.setHorizontallyScrolling(false);). Warning: this is set to true every time textAlignment` changes
Apache License Version 2.0, January 2004