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;
}

AngularMaterial-MatRipple在表行外部显示波纹

1 个答案: