Nativescript-Ripple
Thisplugiaimstobrigaative(orclosetoative)rippleimplemetatiooAdroidadiOS.TheadroidversiousesaRippleDrawableadcoservesthepreviousbackgroud,aswellasCSSstyles.
Istallatiotsplugiaddativescript-rippleUsageThiswillolyworkoAdroidLollipop5.0orlateradayversioofiOS.
XMLENSURETOBINDATAPLISTENERTOTHECHILDELEMENT,ORTHISWON'TWORKONANDROID
<Pageclass="page"avigatigTo="oNavigatigTo"xmls="https://schemas.ativescript.org/ts.xsd"xmls:RL="ativescript-ripple"><ActioBarclass="actio-bar"><Labelclass="actio-bar-title"text="Home"></Label></ActioBar><ScrollView><StackLayout><RL:RipplerippleColor="#d50000"><Labeltext="RedRipples!!!"class="message"textWrap="true"tap="dummy"/></RL:Ripple><RL:RipplerippleColor="#fff000"><Imagesrc="~/home/images/batma.pg"margi="10"stretch="aspectFit"tap="dummy"/></RL:Ripple><RL:Ripple><Labeltext="DefaultRipple"class="message"textWrap="true"tap="dummy"/></RL:Ripple><RL:RipplerippleColor="#fff"><GridLayoutbackgroudColor="#FF4081"borderRadius="30"height="60"width="60"tap="dummy"><Labeltext="B"fotSize="30"color="#fff"verticalAligmet="ceter"horizotalAligmet="ceter"textWrap="true"/></GridLayout></RL:Ripple><RL:RipplerippleColor="#c8c8c8"><Labelclass="label-butto"text="LighterRipple"textWrap="true"tap="dummy"/></RL:Ripple><RL:RipplerippleColor="#f5f5f5"><Labeltext="Possibilities"color="#fff"paddig="10"textWrap="true"tap="tapEvet"class="dark-butto"/></RL:Ripple></StackLayout></ScrollView></Page>RippleOptiosrippleColorsetstheripplecolor.Examples:"#ffffff"|"rgba(255,255,255,0.5)".
rippleColorAlphasetstheripplecoloralpha(multiplicative).Default:0.25.NOTE:Thisismultiplicativetoa0.5alphagivebytheativeclassRippleDrawable.ThissamevalueishardcodediiOStomakebothplatformsbehavethesame.
rippleLayersetsthelayertherippleisappliedto(ANDROIDONLY).Allowedvalues:foregroud(defaultoAPI>=23)|backgroud.SettigthistobackgroudwillmaketherippleolyappearotheView'sbackgroud(meaigitwo'tappearifrotofaimage,forexample).
rippleEabledcabesetto"false"(rippleEabled="false")todisabletheripple.ThiswillalsodisablerippleeffectsoViewsthathavethematively(likeButto).
AgularImporttheNgRippleModuleIfyou'reusigothermodulesthatchagethebackgroud(likehttps://github.com/Especializa/ativescript-g-shadow),esuretoimportitLAST,otherwisetheRipplebackgroudwillbeoverwritte.
import{NgRippleModule}from'ativescript-ripple/agular';@NgModule({imports:[NgRippleModule,//...],//...})exportclassMyModule{}Useitithetemplates:ENSURETOBINDATAPLISTENER,ORTHISWON'TWORKONANDROID
<Labelrippletext="mylabeltext"(tap)="tapf()"></Label>
<StackLayoutripplerippleColor="#00ff00"style="paddig:30;border-radius:10;"(tap)="tapf()"><Labeltext="thisisisidethelayout!"></Label></StackLayout>ImplemetatiodetailsOAdroid,iftheviewdoesothaveabackgroud,weassigatrasparetoe.Otherwise,turigthescreeoffadtheoagaimakesthebackgroudthesameasthemaskcolor(black).
RippleOptiosrippleColorsetstheripplecolor.Examples:"#ffffff"|"rgba(255,255,255,0.5)".
rippleColorAlphasetstheripplecoloralpha(multiplicative).Default:0.25.NOTE:Thisismultiplicativetoa0.5alphagivebytheativeclassRippleDrawable.ThissamevalueishardcodediiOStomakebothplatformsbehavethesame.
rippleLayersetsthelayertherippleisappliedto(ANDROIDONLY).Allowedvalues:foregroud(defaultoAPI>=23)|backgroud.SettigthistobackgroudwillmaketherippleolyappearotheView'sbackgroud(meaigitwo'tappearifrotofaimage,forexample).
ripplecabesetto"off"(ripple="off")todisabletheripple.ThiswillalsodisablerippleeffectsoViewsthathavethematively(likeButto).
KowIssuesNoRippleoAdroidIfyourRippleisotworkigoAdroid,trythefollowig:
Verifytheviewyou'reapplyigtheRippletohasatapevetIftheviewisaText-likeview(Buttos,Labels,etc),thereisabugthatprevetsayforegroudtobeappliedtoitwhetextWrapisottrueadtextAligmetisceterorright.Therearemayfixes(olyoeiseeded):WraptheViewiaotherlayout(likeaGridLayout)ChagetherippleLayertobackgroudUsetextWrap="true"DisableHorizotallyScrolligforyourView(yourLabel.adroid.setHorizotallyScrollig(false);).Warig:thisissettotrueeverytimetextAligmetchagesLiceseApacheLiceseVersio2.0,Jauary2004
评论