Angular Material 2 - 禁用波纹？

Question

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

有谁知道吗

1. 是否可以在现有组件上禁用/配置 Ripple（在本例中为 md-tab-group）？最新版本导致我的选项卡标题跳转，因为 Ripple 正在计算较大的值，解决方案是直接在 MdTabGroup 模板中为 md-tab-label 添加一个较小的值 md-ripple-max-radius 。
是否有计划
2. 删除 md-tab-labels 的最小宽度？我正在使用一个非常小的选项卡组（只有 300px 宽度），因此 160px 最小宽度不可用。

谢谢！

Answer 1

使用

disableRipple 作为属性，使用 Angular 材质禁用 md-tab-group

 的波纹，就像 

Angular2+ 一样。

只需做这样的事情：

<md-tab-group disableRipple></md-tab-group> 此外，如果您使用的是

最新的角度材质，它会有点不同，如下所示：

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

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}}]

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>

2. 第二种解决方案，使用

   纯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 组件的样式，将更改保留在相关组件内（考虑仅包装这些组件以进行本地更改）。

Answer 4

如果您想使用 Angular 材质 v15 删除 Angular v15 中的波纹和点击效果，您可以使用“disableRipple”属性和一些样式来实现。

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

将样式规则添加到 styles.scss 或 styles.css：

   .mdc-checkbox__ripple { 
     display: none;
   }

Answer 5

假设您有一个由几列组成的

CSS-Grid。在最后一列中，您有一个 MaterialMenu

（由 

MaterialIconButton

 激活）。

在不同的列中，您选择使用替代方案

MaterialIcon

（无按钮），并发现随着窗口宽度的减小，它无法在网格布局内保持正确的垂直对齐。

因此，您将其

MaterialIcon

 更改为 

MaterialIconButton

 并看到，现在所有内容都完全垂直居中。

这里是 div 框（Chrome 调试 CSS 扩展显示垂直居中）：

您现在在这个

MaterialIconButton（例如灯泡）上遇到悬停和波纹效果

，这可能被视为侵入性的。在这种情况下，建议消除这些影响：

导入必要的模块（摘录）：

imports: [
  // ...
  MatIconModule,
  MatButtonModule,
  MatRippleModule,
],

禁用波纹，如：

<div class="lightbulb-container">
  <button mat-icon-button [disableRipple]="true">
    <mat-icon>lightbulb</mat-icon>
  </button>
</div>

覆盖此 MatIconButton Hover

 并删除 

Cursor

：

  .lightbulb-container {
    button {
      cursor: initial;
      --mat-icon-button-state-layer-color: transparent;
    }
  }