Angular Material - Mat Ripple 在表格行外显示波纹

Question

我试图在点击时在表格行中使用matRipple。但是，涟漪效应在特定表行tr 之外流动。但是，它对table td. 起作用。效果应该在MatButton 中发生的边界内。

链接：-https://stackblitz.com/edit/angular-material-2ahyd7?file=app/app.component.html

<table>
      <tbody>
        <tr matRipple  (click)="callalert()">
          <td>sss</td>
          <td>ssssss</td>
        </tr>
        <tr matRipple  (click)="callalert()">
          <td>sss</td>
          <td>ssssss</td>
        </tr>
        <tr matRipple  (click)="callalert()">
          <td>sss</td>
          <td>ssssss</td>
        </tr>
        <tr matRipple  (click)="callalert()">
          <td>sss</td>
          <td>ssssss</td>
        </tr>
      </tbody>
    </table>

Answer 1

看起来这是一个已知问题：https://github.com/angular/material2/issues/11883

使用mat-table 的潜在解决方法

<table mat-table [dataSource]="items">
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.name}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple></mat-row>
</table>

您还可以创建一个.ripple CSS 类并将该类应用到您想要波纹的行：

.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:hover {
  background: white radial-gradient(circle, transparent 1%, white 1%) center/15000%;
}
.ripple:active {
  background-color: #ccc;
  background-size: 100%;
  transition: background 0s;
}