Notoriously Problematic Merge

    @nativescript-community/ui-material-ripple
    TypeScript icon, indicating that this package has built-in type declarations

    5.3.14 • Public • Published

    NativeScript Material Ripple

    Material Design's Ripple component for NativeScript.

    npm npm

    Contents

    1. Installation
    2. Changelog
    3. FAQ
    4. Usage
    5. API

    Installation

    ⚠️ Warning ⚠️

    From NativeScript 5.x using this component will break the NativeScript tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either bottomnavigationbar (this one is the best choice, closest to material design) or material-tabs (clone of the NativeScript one, but with a little less features).

    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 nativescript-material-ripple@2.5.4

    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.

    Install

    npm i @nativescript-community/ui-material-ripple

    DownloadsWeekly Downloads

    80

    Version

    5.3.14

    License

    Apache-2.0

    Unpacked Size

    85.8 kB

    Total Files

    29

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar