Question

如何仅为标签关闭波纹动画？我试图在配置文件中更改它

 activator : "highlight"

但是这并没有为所有按钮设置亮点。

我想为Tabs关闭Ripple动画？

编辑1：

我想删除ion-tabs

的效果

<ion-tabs>
 <ion-tab [root]="tab1Root" tabIcon="people"></ion-tab>
 <ion-tab [root]="tab2Root" tabIcon="paper"></ion-tab>
 <ion-tab [root]="tab3Root" tabIcon="settings"></ion-tab>
</ion-tabs>

Answer 1

您可以在app.module.ts文件中执行以下操作。

<强>全球

<强> app.module.ts

 IonicModule.forRoot(MyApp, {
    platforms: { 
      android: { 
        activator: 'none' 
     } 
  } 
}

仅适用于离子标签：

你必须在页面组件处理CSS hack.No框架级支持。

<强> html的

<ion-tabs>
 <ion-tab [root]="tab1Root" tabIcon="people" class="disable-ripple"></ion-tab>
 <ion-tab [root]="tab2Root" tabIcon="paper" class="disable-ripple"></ion-tab>
 <ion-tab [root]="tab3Root" tabIcon="settings" class="disable-ripple"></ion-tab>
</ion-tabs>

<强> .scss

.ios,
.md,
.wp {
    .disable-ripple ion-tab-effect {
       display: none;
    }
}

Answer 2

我找到了一个Hacky解决方案

ion-tabs .button-effect {
 display:none !important;
}

看起来按钮效果是＆＃34;绘制＆＃34;涟漪。所以我只是禁用了ion-tabs

的所有后代的效果

我在 variables.scss

中写了那个css

编辑1：不。这也将.button-effect类设置为全局display:none。我的问题是仅为单个ion-tab元素设置它。

Answer 3

在Ionic 4中，按钮具有CSS自定义属性，因此您可以执行以下操作：

.disable-ripple {
    --ripple-color: transparent;

  &:hover {
      background: unset !important;
  }
}

Answer 4

对于Ionic 4，只需使用iOS模式：

reverse_view

如何关闭标签[Android]上的Ripple动画？

4 个答案: