Question

我有一个Angular Material表，第一列带有复选框。我只想在鼠标悬停在表格行上方时显示该复选框。

https://stackblitz.com/angular/pabvkrmvbab?file=app%2Ftable-selection-example.css

我可以使用css更改悬停时的行颜色，但不确定如何使用类似的解决方案来显示复选框

.mat-row:hover {
    background-color: red;
}

Answer 1

您可以执行以下操作。

将名为boolean的新show属性添加到ELEMENT_DATA。

  addShowCheckboxProperty() {
    ELEMENT_DATA.map((data: any) => {
      data.show = false
    });
  }

使用opacity上的mat-checkbox属性，如下所示显示/隐藏复选框。

<td mat-cell *matCellDef="let row">
  <mat-checkbox [style.opacity]="row.show || selection.isSelected(row) ? 100 : 0"
                (click)="$event.stopPropagation()"
                (change)="$event ? selection.toggle(row) : null"
                [checked]="selection.isSelected(row)"
                [aria-label]="checkboxLabel(row)">
  </mat-checkbox>
</td>

如下处理mouseover上的mouseleave和tr事件。

HTML

  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
      (click)="selection.toggle(row)" 
      (mouseover)="handleMouseOver(row)" 
      (mouseleave)="handleMouseLeave(row)">
  </tr>

TS

  handleMouseOver(row) {
    const position = row.position;
    ELEMENT_DATA.map((data: any) => {
      if (data.position === position) {
        data.show = true;
      }
    });
  }

  handleMouseLeave(row) {
    const position = row.position;
    ELEMENT_DATA.map((data: any) => {
      if (data.position === position) {
        data.show = false;
      }
    });
  }

当您在checkbox上显示mouseover时，我认为不需要在表标题行上全部选中checkbox。 找到工作StackBlitz。

Answer 2

您可以使用ngIf来检查变量，并使用mouseenter可以将相同的变量设置为true，以便能够隐藏，只需将相同的变量设置为{{1} }和false。

类似的事情：

HTML

mouseleave

伙伴

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" (mouseenter)="isHover=true" 
(mouseleave)="isHover=false">

  <!-- Checkbox Column -->
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox *ngIf="isHover" (change)="$event ? masterToggle() : null"
                    [checked]="selection.hasValue() && isAllSelected()"
                    [indeterminate]="selection.hasValue() && !isAllSelected()"
                    [aria-label]="checkboxLabel()">
      </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox *ngIf="isHover" (click)="$event.stopPropagation()"
                    (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)"
                    [aria-label]="checkboxLabel(row)">
      </mat-checkbox>
    </td>
  </ng-container>

... 

</table>

在这种情况下，复选框会弹出，但是您可以添加带有过渡的css以获得平滑的效果或所需的任何效果。

Answer 3

使用CSS轻松完成。

import UIKit

class ColorMix: CIFilter {

    private let kernel: CIKernel

    @objc dynamic var inputImage: CIImage?
    @objc dynamic var inputTime: CGFloat = 0

    override init() {

        let url = Bundle.main.url(forResource: "default", withExtension: "metallib")!
        let data = try! Data(contentsOf: url)
        kernel = try! CIKernel(functionName: "colorMix", fromMetalLibraryData: data)
        super.init()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func outputImage() -> CIImage? {

        guard let inputImage = inputImage else {return nil}

        return kernel.apply(extent: inputImage.extent, roiCallback: {
            (index, rect) in
            return rect.insetBy(dx: -1, dy: -1)
        }, arguments: [inputImage, CIVector(x: inputImage.extent.width, y: inputImage.extent.height), inputTime])
    }

    func use(image: CIImage, time: Double) -> CIImage {

        var resultImage = image

        // 1. Apply filter
        let filter = ColorMix()
        filter.setValue(resultImage, forKey: "inputImage")
        filter.setValue(NSNumber(floatLiteral: time), forKey: "inputTime")

        resultImage = filter.outputImage()!

        return resultImage
    }

}

Answer 4

我想对 Sudarshana Dayananda's answer添加一个略有不同的观点，因此您不必在数据中添加新字段：

1）确保您的数据对象（每一行）都有一个“ id”字段。

2）将以下内容添加到行中：

<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRowClicked(row)"
            (mouseover)='mouseOverRow(row)' (mouseleave)='mouseLeaveRow(row)'></tr>

3）然后在.ts中将当前悬停的行设置为类变量：

mouseOverRow(row) {
this.hoveredRow = row;}

mouseLeaveRow(row) {
this.hoveredRow = null;}

4）因此，您可以在复选框/按钮上添加：

[class.buttonInvisible]='!hoveredRow || (element.id !== hoveredRow.id)'

我的组件看起来像这样：

    <ng-container matColumnDef="select">
                <th mat-header-cell *matHeaderCellDef>
                    <!-- {{ 'Generic.select' | translate }} -->
                </th>
                <td mat-cell *matCellDef="let element" style='text-align:end; width:40px;'>
                    <button [class.buttonInvisible]='!hoveredRow || (element.id !== hoveredRow.id)' class='tableActionButton' mat-icon-button
                        color="accent" aria-label="Delete" (click)="onDeleteClicked(element);$event.stopPropagation();">
                        <mat-icon>delete</mat-icon>
                    </button>
                </td>
            </ng-container>

其中buttonInvisible CSS：

.buttonInvisible{
opacity: 0 !important;}

让我在这里快速解释一下逻辑。当（1）未初始化hoverRow类（因此尚未发生悬停）或（2）行元素ID与当前悬停的行ID不匹配时，buttonInvisible类将有条件地应用于所有复选框/按钮。因此，如果ID与当前悬停的设置行匹配，您只会在特定行上看到该复选框。

角度材质：将鼠标悬停在表格行上时显示复选框

4 个答案:

HTML

伙伴