角度材质2 - 禁用纹波？

我目前正在与MD-标签组（刚刚更新到昨天最新版本）工作...角度材质2 - 禁用纹波？

有谁知道

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

谢谢！

来源

2016-12-15 Cleudi

@Alireza张贴您的问题的正确答案。您应该考虑将其标记为答案。 – mtpultz

我想出了两种方法来覆盖基于另一篇文章的MD风格。对于小标签组中的标签太宽，我也遇到了同样的问题。它仍然是非常实验性的，可能需要进一步的解释，但它对我有效。

萨斯

首先解决造型

您可以使用/深/在上课前您要覆盖

/* 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组件的风格，保持有关组件内部的变化（考虑只包装本地组件的变化）。

来源

2016-12-25 21:24:36

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

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

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

来源

2017-06-15 04:37:17 Alireza

角度材质2 - 禁用纹波？

回答

相关问题