Question

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

有谁知道

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

谢谢！

Answer 1

使用 disableRipple 作为属性，使用Angular材质禁用md-tab-group的 Angular2 + 的涟漪。

只需做这样的事情：

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

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

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

Answer 2

我提出了两种基于另一篇文章覆盖md样式的方法。对于小标签组中的标签太宽，我遇到了完全相同的问题。它仍然是非常实验性的，可能需要进一步解释，但它对我有用。

使用 Sass 样式

您可以在尝试覆盖的课程

/ deep /

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

纯css
的第二个解决方案
- 创建您在主 index.html 中链接的 overrides.css 文件，然后在此处覆盖材料类

＆＃13;

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

＆＃13;

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

＆＃13;

两者都有点脏，但第一个提供了一个很好的解决方案来覆盖md组件的样式，保留相关组件内部的更改（考虑将这些组件包装为仅本地更改）。

角度材料2 - 禁用纹波？

2 个答案: