Angular2材质中的Md-ripple

Question

我在任何地方都找不到任何信息，如何使用ng2材料中的md-ripple。

试过了

<button md-ripple-foreground class="loginButton"></button>

要么

<button md-ripple-fade-in class="loginButton"></button>

要么

<button md-ripple class="loginButton"></button>

但是它们都不起作用。 如何打开它？

如果您不知道涟漪如何工作： https ： //codepen.io/Craigtut/pen/dIfzv

Answer 1

面临着同样的问题，这就是我的解决方法-我想在MdCard中实现它，并且可以正常工作。

在app.module.ts或任何模块文件中->

import { MdRippleModule } from '@angular/material';

不要忘记在同一文件的@NgModule内的导入中声明

imports: [ MdRippleModule ]

现在直接进入要实现涟漪效应指令的标签

在我的示例中：

<md-card
  md-ripple
  mdRippleColor="#00E4AC">
Content 
</md-card>

在以上示例中使用更像mdRippleColor性质，请参考此链接：HTTPS：̶/̶/̶g̶i̶t̶h̶u̶b̶.̶c̶o̶m̶/角度/材料2 / BLOB /主/ SRC / LIB /核心/脉动/̶R̶E̶A̶D̶M̶E̶.̶m̶d̶＃API-摘要（由于版本升级，链接不再可用）

Answer 2

const globalRippleConfig: RippleGlobalOptions = {
  disabled: false,
  baseSpeedFactor: 1.5 // Ripples will animate 50% faster than before.
};

和

<style>
    .ripple{
      position: relative;
     }
  </style>
 <div class="ripple" md-ripple>
 </div>

Answer 3

您必须在元素中定义[mdRippleColor]或[mdRippleBackgroundColor] 。 否则，它将默认为css背景色，您将看不到任何效果：

<button md-ripple class="loginButton" mdRippleColor="#F00"></button>