时间戳

首页 > 解决方案 > AngularMaterial - MatRipple is displaying ripple outside table row

angular - AngularMaterial - MatRipple is displaying ripple outside table row

问题描述

I am trying to use matRipple in table row on click. However, ripple effect is flowing outside particular table row tr .However, it is working for table td. The effect should be within boundary as it happens in MatButton.

Link:- 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>

标签： angularangular-material

解决方案

看起来这是一个已知问题：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>

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

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

推荐阅读