Question

我在Tab内有一个简单的按钮，如果设置了Tab-Group的[backgroundColor]属性，则Button会失去波纹效果。

<mat-tab-group [color]="primary" [backgroundColor]="'primary'">

  <!-- Try Removing the [backgroundColor] property in the above line
  and click the button to see the ripple effect-->

  <mat-tab label="First">
    <button mat-raised-button>Button Looses Ripple</button>
  </mat-tab>

  <mat-tab label="Second">
    <button mat-raised-button>Button Looses Ripple</button>
  </mat-tab>

  <mat-tab label="Third">
    <button mat-raised-button>Button Looses Ripple</button>
  </mat-tab>

</mat-tab-group>

但是，如果我删除 [backgroundColor] 属性，则该按钮重新获得涟漪效果。！

<mat-tab-group [color]="primary">

  <mat-tab label="First">
    <button mat-raised-button>Button has Ripple</button>
  </mat-tab>

  <mat-tab label="Second">
    <button mat-raised-button>Button has Ripple</button>
  </mat-tab>

  <mat-tab label="Third">
    <button mat-raised-button>Button has Ripple</button>
  </mat-tab>

</mat-tab-group>

我做错什么了吗？如果没有，那就帮我解决   问题...

更新：！设置按钮的颜色就可以了。   如果我想实现以下目标

<mat-tab-group [color]="primary" [backgroundColor]="'primary'">
  <!-- TAB -->
  <mat-tab label="Third">
    <!-- RIPPLE NOT_WORKING -->
    <div class="div-style mat-elevation-z4" matRipple> Not Working </div>
  </mat-tab>
</mat-tab-group>

<!-- RIPPLE_WORKING -->
<div class="div-style mat-elevation-z4" matRipple> Woring </div>

StackBlitz Example

Answer 1

如果您将accent设置为彩色波纹效果很好，或者将主题颜色设置为按钮，则波纹效果也会再次出现在主要主题上。

  <mat-tab-group [color]="primary" [backgroundColor]="'primary'">

  <!-- Try Removing the [backgroundColor] property in the above line
   and click the button to see the ripple effect-->

  <mat-tab label="First">
  <button mat-raised-button color="primary">Button Looses Ripple</button>
  </mat-tab>

  <mat-tab label="Second">
  <button mat-raised-button color="accent">Button Looses Ripple</button>
 </mat-tab>

 <mat-tab label="Third">
 <button mat-raised-button color="primary">Button Looses Ripple</button>
 </mat-tab>

 </mat-tab-group>

Answer 2

此问题的答案是此行为的原因以及此问题的解决方案。！

StackOverflow-Answer

涟漪效应正在发挥作用，但我们无法将其视为   波纹颜色为白色。因为您已经设置了白色，所以它呈白色   backgroundColor为原色，而您的原色为蓝色，具有   前景白。涟漪自动成为这个前景   颜色。

您可以通过两种方法解决它

如果您的backgroundColor通过为matRippleColor属性提供颜色   设置为深色，在您的情况下为主要颜色并发出警告。

<div class="div-style mat-elevation-z4" matRipple matRippleColor="rgba(0,0,0,.1)>Ripple</div>

如果为TabGroup设置了[backgroundColor]属性，则Angular Material 2 Button松动波纹

2 个答案: