如何在Ionic 4中禁用/移除ion-button的ion-ripple效果？

Question

我需要禁用`ion-button'中默认的ion-ripple-effect。

<ion-button>
  <ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>

我无法禁用pointer-events，因为我需要它。

PS：我已经参考了以下帖子，但是在 Ionic 4 上找不到合适的解决方案：

1. 如何移除 ion-item 的点击效果？
2. 如何禁用元素上的涟漪效果？

- Sebin Benjamin

Answer 1

--ripple-color CSS变量可以用来关闭涟漪效果。

 <ion-button class="no-ripple">
   <ion-icon slot="icon-only" name="trash"></ion-icon>
 </ion-button>

例如，我们可以在按钮上设置--ripple-color: transparent来有效地禁用该效果。

.no-ripple {
  --ripple-color: transparent;
}

请参考https://github.com/ionic-team/ionic/issues/19648

- Sebin Benjamin

---

它并没有关闭涟漪效果，只是使其透明。例如，边距仍然存在。 - Boat

是的，没错。以前没有官方的关闭方式。那时这是推荐的解决方案类型。请查看链接的 Github 问题。 - Sebin Benjamin

Answer 2

只需将模式设置为iOS

<ion-button mode='ios'>

- Fabiano Albernaz

Answer 3

我认为它仅包含在Android中，因此您可以在按钮上设置 mode="ios"以避免该效果。

是的，所以我刚刚checked查看了源代码，它只与 mode="md"（即Android / Material Design）一起使用：

    <TagType
      {...attrs}
      class="button-native"
      disabled={disabled}
      onFocus={this.onFocus}
      onBlur={this.onBlur}
    >
      <span class="button-inner">
        <slot name="icon-only"></slot>
        <slot name="start"></slot>
        <slot></slot>
        <slot name="end"></slot>
      </span>
      {mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
    </TagType>

那是唯一使用按钮本身的方法，rippleType 只提供 bounded 或 unbounded，没有禁用它的方法。

我不确定是否可以使用css隐藏ion-ripple-effect，因为Ionic 4中使用了Web组件封装。

- rtpHarry

---

Web组件的封装使其变得困难。然而，mode="ios"可以解决问题。谢谢:D - Sebin Benjamin

很酷，请考虑将其标记为答案，如果您对此感到满意，这样其他人就不会浪费时间访问和阅读已解决的问题。 - rtpHarry

Answer 4

在Ionic 4的当前版本中，这是一个可以工作的示例：

<ion-button class="submit-btn">...</ion-button>

.submit-btn {
    --background: transparent;
    --background-hover: transparent !important;
}

https://ionicframework.com/docs/api/button#css-custom-properties

- Konrad Gałęzowski