NativeScript 的 Material Design 波纹效果

NativeScript 插件，用于向任何布局添加 Material Design 波纹效果。

这是Brad Martin (@bradmartin)原始的插件的分支，可在https://github.com/bradmartin/nativescript-ripple找到

安装

在命令提示符/终端中，切换到您的应用根目录并执行

NativeScript 3.0+

tns plugin add nativescript-ripple2

演示

原生Android库

Material 波纹

用法

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>

属性

rippleColor : string 可选 - 设置波纹颜色。

Nativescript + Angular

在main.ts文件中，添加以下行以使用波纹效果

import {registerElement} from "nativescript-angular/element-registry";

registerElement("Ripple", () => require("nativescript-ripple2").Ripple);

请注意，在Android上，您可以在<Ripple>视图下有多个子元素，但在iOS上，<Ripple>视图必须只有一个子元素。

贡献者

• Florian Reifschneider @ https://github.com/flore2003
• Brad Martin @ https://github.com/bradmartin 感谢原始版本
• Morten Sjøgren @ https://github.com/m-abs 感谢原始iOS支持