角度材料2 - 禁用纹波？

Question

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

有人知道吗

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

谢谢!

Answer 1

使用disableRipple作为属性为禁用涟漪md-tab-group作为Angular2 +使用角材料.

只需简单地做这样的事情:

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

此外,如果您使用最新的Angular材料,它有点不同,如下所示:

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

Answer 2

我根据另一篇文章想出了两种覆盖 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 组件的样式，将更改保留在相关组件内（考虑仅包装这些组件以进行本地更改）。