如何在我的Angular Bootstrap应用程序中添加材料波纹？

Question

我想在按钮上使用material ripple效果。

所以我添加了

"@material/ripple": "^0.41.0"

我添加了

.btn {
  @include mdc-ripple-surface;
  @include mdc-ripple-radius-bounded;
  @include mdc-states;

  border-radius: 0;
  box-shadow: none;
  padding-bottom: 6px;
  padding-top: 6px;

  &[disabled] {
    background-color: $gray1 !important;
    border: 1px solid $gray4 !important;
    color: $gray10 !important;
  }
}

<button type="submit" class="btn btn-primary btn-block">Sign in</button>

在悬停时看起来像这样。

有什么问题吗？

Answer 1

我认为这是Angular Material Buttons的本机行为。您实际上不需要为此安装任何其他模块。只需在应用程序中引入Angular Material并使用MatButton就可以解决问题。

“角度材质”按钮的颜色通常取决于主题。您可以创建own themes来对其进行自定义。

---

这是您推荐的Sample StackBlitz。