Thispluginaimstobringanative(orclosetonative)rippleimplementationonAndroidandiOS.TheandroidversionusesaRippleDrawableandconservesthepreviousbackground,aswellasCSSstyles.
Installationtnspluginaddnativescript-rippleUsageThiswillonlyworkonAndroidLollipop5.0orlaterandanyversionofiOS.
XMLENSURETOBINDATAPLISTENERTOTHECHILDELEMENT,ORTHISWON'TWORKONANDROID
<Pageclass="page"navigatingTo="onNavigatingTo"xmlns="https://schemas.nativescript.org/tns.xsd"xmlns:RL="nativescript-ripple"><ActionBarclass="action-bar"><Labelclass="action-bar-title"text="Home"></Label></ActionBar><ScrollView><StackLayout><RL:RipplerippleColor="#d50000"><Labeltext="RedRipples!!!"class="message"textWrap="true"tap="dummy"/></RL:Ripple><RL:RipplerippleColor="#fff000"><Imagesrc="~/home/images/batman.png"margin="10"stretch="aspectFit"tap="dummy"/></RL:Ripple><RL:Ripple><Labeltext="DefaultRipple"class="message"textWrap="true"tap="dummy"/></RL:Ripple><RL:RipplerippleColor="#fff"><GridLayoutbackgroundColor="#FF4081"borderRadius="30"height="60"width="60"tap="dummy"><Labeltext="B"fontSize="30"color="#fff"verticalAlignment="center"horizontalAlignment="center"textWrap="true"/></GridLayout></RL:Ripple><RL:RipplerippleColor="#c8c8c8"><Labelclass="label-button"text="LighterRipple"textWrap="true"tap="dummy"/></RL:Ripple><RL:RipplerippleColor="#f5f5f5"><Labeltext="Possibilities"color="#fff"padding="10"textWrap="true"tap="tapEvent"class="dark-button"/></RL:Ripple></StackLayout></ScrollView></Page>RippleOptionsrippleColorsetstheripplecolor.Examples:"#ffffff"|"rgba(255,255,255,0.5)".
rippleColorAlphasetstheripplecoloralpha(multiplicative).Default:0.25.NOTE:Thisismultiplicativetoa0.5alphagivenbythenativeclassRippleDrawable.ThissamevalueishardcodediniOStomakebothplatformsbehavethesame.
rippleLayersetsthelayertherippleisappliedto(ANDROIDONLY).Allowedvalues:foreground(defaultonAPI>=23)|background.SettingthistobackgroundwillmaketherippleonlyappearontheView'sbackground(meaningitwon'tappearinfrontofanimage,forexample).
rippleEnabledcanbesetto"false"(rippleEnabled="false")todisabletheripple.ThiswillalsodisablerippleeffectsonViewsthathavethemnatively(likeButton).
AngularImporttheNgRippleModuleIfyou'reusingothermodulesthatchangethebackground(likehttps://github.com/Especializa/nativescript-ng-shadow),ensuretoimportitLAST,otherwisetheRipplebackgroundwillbeoverwritten.
import{NgRippleModule}from'nativescript-ripple/angular';@NgModule({imports:[NgRippleModule,//...],//...})exportclassMyModule{}Useitinthetemplates:ENSURETOBINDATAPLISTENER,ORTHISWON'TWORKONANDROID
<Labelrippletext="mylabeltext"(tap)="tapfn()"></Label>
<StackLayoutripplerippleColor="#00ff00"style="padding:30;border-radius:10;"(tap)="tapfn()"><Labeltext="thisisinsidethelayout!"></Label></StackLayout>ImplementationdetailsOnAndroid,iftheviewdoesnothaveabackground,weassignatransparentone.Otherwise,turningthescreenoffandthenonagainmakesthebackgroundthesameasthemaskcolor(black).
RippleOptionsrippleColorsetstheripplecolor.Examples:"#ffffff"|"rgba(255,255,255,0.5)".
rippleColorAlphasetstheripplecoloralpha(multiplicative).Default:0.25.NOTE:Thisismultiplicativetoa0.5alphagivenbythenativeclassRippleDrawable.ThissamevalueishardcodediniOStomakebothplatformsbehavethesame.
rippleLayersetsthelayertherippleisappliedto(ANDROIDONLY).Allowedvalues:foreground(defaultonAPI>=23)|background.SettingthistobackgroundwillmaketherippleonlyappearontheView'sbackground(meaningitwon'tappearinfrontofanimage,forexample).
ripplecanbesetto"off"(ripple="off")todisabletheripple.ThiswillalsodisablerippleeffectsonViewsthathavethemnatively(likeButton).
KnownIssuesNoRippleonAndroidIfyourRippleisnotworkingonAndroid,trythefollowing:
Verifytheviewyou'reapplyingtheRippletohasatapeventIftheviewisaText-likeview(Buttons,Labels,etc),thereisabugthatpreventsanyforegroundtobeappliedtoitwhentextWrapisnottrueandtextAlignmentiscenterorright.Therearemanyfixes(onlyoneisneeded):WraptheViewinanotherlayout(likeaGridLayout)ChangetherippleLayertobackgroundUsetextWrap="true"DisableHorizontallyScrollingforyourView(yourLabel.android.setHorizontallyScrolling(false);).Warning:thisissettotrueeverytimetextAlignmentchangesLicenseApacheLicenseVersion2.0,January2004
评论