如何在标签上关闭涟漪动画 [安卓]

Question

如何仅为选项卡关闭波纹动画？我试图在配置文件中更改此设置

 activator : "highlight"

但这不会突出显示所有按钮。

我想关闭涟漪动画只为标签

？

编辑 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黑客。对此没有框架级别的支持。

。.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

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

.disable-ripple {
    --ripple-color: transparent;
  &:hover {
      background: unset !important;
  }
}

Answer 3

我找到了一个黑客解决方案

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

看起来按钮效果是"绘制"瑞波币的原因。所以我只是禁用了所有ion-tabs后代的效果

我在我的变量中写了css.scss。

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

Answer 4

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

<ion-tabs>
  <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" mode="ios">