Question

我有两个并排的控制元件。一个是-与here

<mat-checkbox>Check me!</mat-checkbox>

另一个是材料图标按钮

  <button mat-icon-button>
    <mat-icon>home</mat-icon>
  </button>

当我们指向（悬停在该复选框上方）复选框时，它周围显示一个灰色的圆形波纹（默认情况下）。

但是当我们指向该按钮时，其效果并不相同。为了保持两个控件的一致性，当用户将鼠标指向（悬停在）按钮上时，我希望其在按钮上具有相同的波纹效果。两个元素的波纹必须具有相同的圆形，相同的颜色和相同的大小。

那怎么实现？

Answer 1

您应该尝试使用指令触发纹波。

@Directive({
selector: '[rippleOnHover]',
providers: [MatRipple]})

rippleRef;
constructor(
    private _elementRef: ElementRef,
    private ripple: MatRipple
) {}
@HostListener('mouseenter') onMouseEnter(): void {
    if (this._elementRef && this._elementRef.nativeElement) {
        this._elementRef.nativeElement.style.overflow = 'hidden';
    }
    
    if (this.ripple) {
        this.rippleRef = this.ripple.launch({ centered: true, persistent: true });
    }
}
@HostListener('mouseleave') onMouseLeave(): void {
    if (this.rippleRef) {
        this.rippleRef.fadeOut();
    }
}}

我基于答案Angular 5 attribute directive add mat-ripple to host element和https://material.angular.io/components/ripple/overview

角度材质按钮-与复选框相同，如何在悬停上启用波纹

1 个答案: