如何在Ionic应用中使用matRipple指令实现指定半径点击涟漪？

第一步：引入Angular Material的Ripple模块 #

先确保你的Ionic项目已安装@angular/material，然后在根模块（比如app.module.ts）中导入MatRippleModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatRippleModule } from '@angular/material/core';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), MatRippleModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

第二步：修改模板配置matRipple参数 #

给容器元素添加matRipple指令，通过matRippleRadius指定固定半径，按需添加matRippleUnbounded允许涟漪超出容器范围：

<ion-app>
  <ion-content>
    <div class="container" 
         matRipple 
         [matRippleRadius]="100" <!-- 这里设置你需要的半径，单位为px -->
         matRippleUnbounded>
      there is whole content
    </div>
  </ion-content>
</ion-app>

第三步：添加基础样式 #

给容器设置必要样式，确保涟漪能正常触发和显示：

.container {
  width: 100%;
  height: 100vh;
  cursor: pointer;
  position: relative; /* matRipple依赖父元素的相对定位 */
}

/* 可选：自定义涟漪颜色 */
.mat-ripple-element {
  background-color: rgba(0, 0, 0, 0.2);
}

关键参数说明 #

• matRippleRadius：直接定义涟漪扩散的最大半径，完全满足指定半径的需求
• matRippleUnbounded：若需要涟漪不受容器边界限制，添加该属性即可，否则涟漪会被容器裁剪
• 默认状态下，涟漪会从点击位置开始扩散，无需额外设置中心触发

内容的提问来源于stack exchange，提问作者Rodsps