Question

我已按照指南进行操作：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>

Answer 1

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

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

请参阅带材料设计的角度引导程序：

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

带角度的mdbootstrap - 动画不起作用

1 个答案: