Nefarious Pomegranate Magnate

    nativescript-ripple2
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    npm npm GitHub stars GitHub forks

    Material Design Ripples for NativeScript

    NativeScript plugin to add Material Design ripple effects to any layout.

    This is a fork of the original nativescript-ripple plugin by Brad Martin (@bradmartin) which can be found at https://github.com/bradmartin/nativescript-ripple

    Installation

    From your command prompt/termial go to your app's root folder and execute:

    NativeScript 3.0+

    tns plugin add nativescript-ripple2

    Demo

    Demo

    Native Android Library

    Material Ripple

    Usage

    XML

    <Page 
      xmlns="http://schemas.nativescript.org/tns.xsd
      xmlns:RL="nativescript-ripple2" loaded="pageLoaded">
      <ActionBar title="Ripples for Every Android" backgroundColor="#3489db" color="#fff" />
      <ScrollView>
        <StackLayout>
     
          <RL:Ripple rippleColor="#d50000">
            <Label text="Red Ripples!!!" class="message" textWrap="true" />
          </RL:Ripple>
     
          <RL:Ripple rippleColor="#fff000">
            <Image src="~/images/batman.png" margin="10" stretch="aspectFit" />
          </RL:Ripple>
     
          <RL:Ripple>
            <Label text="Default Ripple" class="message" textWrap="true" />
          </RL:Ripple>
     
          <RL:Ripple rippleColor="#fff" backgroundColor="#FF4081" borderRadius="30" height="60" width="60">
            <Label text="B" fontSize="30" color="#fff" verticalAlignment="center" horizontalAlignment="center" textWrap="true" />
          </RL:Ripple>
     
          <RL:Ripple  rippleColor="#c8c8c8" class="label-button">
            <Label text="Lighter Ripple" textWrap="true" />
          </RL:Ripple>
     
          <RL:Ripple rippleColor="#f5f5f5" margin="15" tap="{{ tapEvent }}" class="dark-button">
            <Label text="Possibilities" color="#fff" padding="10" textWrap="true" />
          </RL:Ripple>
     
        </StackLayout>
      </ScrollView>
    </Page>

    Attributes

    rippleColor : string optional - sets the ripple color.

    Nativescript + Angular

    In the main.ts file, add those lines in order to use the ripple effect :

    import {registerElement} from "nativescript-angular/element-registry";
    
    registerElement("Ripple", () => require("nativescript-ripple2").Ripple);
    

    Please note that on Android, you can have multiple chlidren under a <Ripple> view, but with iOS, the <Ripple> view must have only one child element.

    Contributors

    Install

    npm i nativescript-ripple2

    DownloadsWeekly Downloads

    16

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    20.5 kB

    Total Files

    12

    Last publish

    Collaborators

    • flore2003