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

https://github.com/angular/material2/tree/master/src/lib/core/ripple

Answer 1

遇到同样的问题，我就是这样做的 - 我想在MdCard中实现它并且它有效。

在app.module.ts或您的模块文件所在的位置 - ＆gt;

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 -̶s̶u̶m̶m̶a̶r̶y̶（由于版本升级，链接不再可用）

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>

Angular2材料中的Md-ripple

3 个答案: