2

我在这里遵循了指南：https ://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design 。事情看起来像我所期望的那样，但动画不起作用。在此演示页面上：https ://mdbootstrap.com/components/buttons/按钮在单击时具有波浪效果，但是当我将演示代码复制/粘贴到我的（测试）app.component.html 中时，则没有波浪影响。

似乎有些事件处理程序没有注册，但我不知道如何做到这一点......

编辑

经过一番摸索，我实际上发现了如何让涟漪发挥作用！:) 这是我的 app.module.ts（RippleModule 导入很重要）：

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { RippleModule } from 'angular-bootstrap-md/ripple';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    RippleModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule {}

如何在按钮上使用波纹的示例：

<!-- mdbRippleRadius attribute (directive) and the waves-light class is imporant -->
<button type="button" class="btn btn-primary waves-light" mdbRippleRadius >Primary</button>
4

1 回答 1

1

mdbRippleRadius如果您使用 Angular.io，则需要将该指令添加到您的 html 中。

<button type="button" class="btn btn-primary" mdbRippleRadius>Primary</button>

请参阅带有 Material Design 的 Angular Bootstrap：

https://mdbootstrap.com/角/components/buttons/

于 2017-11-28T08:07:08.303 回答