Angular Material 2 - 禁用涟漪效果？

Question

我目前正在使用 md-tab-group（昨天刚更新到最新版本）...

有没有人知道

1. 是否有可能在现有组件（在此情况下为 md-tab-group）上禁用/配置 Ripple？最新版本会使我的标签标题跳动，因为 Ripple 计算了大值，解决方法是在 MdTabGroup 模板中直接为 md-tab-label 添加一个小值的 md-ripple-max-radius。
2. 是否有计划移除 md-tab-labels 的最小宽度？我正在使用相当小的选项卡组（仅 300px 宽度），因此不适用 160px 的最小宽度。

谢谢！

- Cleudi

---

@Alireza已经回答了你的问题并给出了正确的答案，建议你将其标记为答案。 - mtpultz

Answer 1

使用 disableRipple 作为属性，以在使用 Angular Material 的 md-tab-group 中禁用涟漪效果，对于 Angular2+，只需简单地执行如下操作：

<md-tab-group disableRipple></md-tab-group>

如果您正在使用最新版本的Angular Material，那么用法会有一些不同，如下所示：

<mat-tab-group [disableRipple]="true"></mat-tab-group>

- Alireza

---

在 Angular 5+ 中，[disableRipple]="true" 表示禁用涟漪效果。 - Vlad

为了禁用第一个聚焦元素的涟漪效果，请将其tabindex属性设置大于1。 - zaheer

在Angular 7中无法正常工作。由于'mat-horizontal-stepper'不是已知属性，因此无法绑定'disableRipple'。 - Mickers

[disableRipple]="true" 在 Angular 8 中仍然有效。 - Moissane Hernandez

它在浏览器控制台中显示错误： 在@ NgModule中添加MaterialStepper - Gaurav Patil

Answer 2

我目前使用的Angular版本是15.2.6。 当使用MatStepper等组件时，这是唯一有效的方法。

1. 在 app.module.ts 文件中：

   import {MatRippleModule, MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';**
   

2. 在 @NgModule 装饰器中，你需要在 providers[] 数组中提供以下内容：

   providers: [{provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: {disabled: true}}]
   

- moaz alomary

Answer 3

我根据另一篇文章提出了两种覆盖 md 样式的方法。我在小型选项卡组中遇到了完全相同的选项卡过宽问题。这仍然是非常实验性的，可能需要进一步的解释，但对我来说已经起作用了。

1. 第一种解决方案使用 Sass 样式

您可以在要覆盖的类之前使用 /deep/

/* your-component.component.scss file*/

/deep/ .md-tab-label {
  min-width: 0px; /* Or whatever value you wish */
  /* In some situations !important seems necessary */
}

<!-- your-component.component.html -->
<!-- Template from Angular Material's Github Readme.md -->
<md-tab-group>
  <md-tab>
    <template md-tab-label>
      The <em>best</em> pasta
    </template>
    <h1>Best pasta restaurants</h1>
    <p>...</p>
  </md-tab>
  <md-tab>
    <template md-tab-label>
      <md-icon>thumb_down</md-icon> The worst sushi
    </template>
    <h1>Terrible sushi restaurants</h1>
    <p>...</p>
  </md-tab>
</md-tab-group>

使用纯CSS的第二种解决方案

• 创建一个overrides.css文件，将其链接到主要的index.html文件中，并在此处覆盖材料类

/* overrides.css */
.md-tab-label ,.md-tab-label-active {
  min-width: 0; /* same comments as the first solution */
}

<!-- index.html -->
<link rel="stylesheet" content="text/css" href="overrides.css">

这两种方法都有点不太优雅，但第一种方法为我提供了一个很好的解决方案，可以覆盖 md 组件的样式，并将更改限制在相关组件内（考虑仅对这些组件进行本地更改）。

- Evan G

Answer 4

如果你想在Angular Material v15中移除波纹和点击效果，可以使用“disableRipple”属性和一些样式来实现。

<mat-checkbox
   formControlName="yes"
   disableRipple
   >Yes
</mat-checkbox>

在 styles.scss 或 styles.css 中添加样式规则：

   .mdc-checkbox__ripple { 
     display: none;
   }

- mscmnc