时间戳

首页 > 解决方案 > 单击垫子按钮时如何更改背景颜色 - Angular？

angular - 单击垫子按钮时如何更改背景颜色 - Angular？

问题描述

例如：https ://material.angular.io/components/button/overview 当我单击这些按钮中的任何一个时，按钮上添加了灰色背景效果。

我已经尝试过 ngdeep 并针对 mat 按钮的状态，例如焦点和活动。但是，即使使用红色等背景颜色，我仍然可以看到灰色，而背景为白色，很明显灰色仍然存在。

标签： angularangular-material

解决方案

您可以使用 disableRipple 为 true 来关闭材质按钮的波纹效果。这样灰色背景效果就不会在单击按钮时出现。

<button mat-raised-button [disableRipple]="true">Basic</button>

您需要在根 module.ts 文件中添加以下配置

const globalRippleConfig: RippleGlobalOptions = {
  disabled: true,
  animation: {
    enterDuration: 300,
    exitDuration: 0
  }
};

@NgModule({
  providers: [
    {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: globalRippleConfig}
  ]
})

在此处查看详细链接

https://stackblitz.com/edit/angular-xvbzzq-yhgy5c?file=src/app/material-module.ts

推荐阅读