我如何 disable/remove ion-button Ionic 4 中的离子波纹效应？

Question

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

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

我无法根据需要禁用 pointer-events。

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

Answer 1

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

是的，所以我只是 checked the source code，它只与 mode="md" 一起使用（即 Android / Material 设计）：

    <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，无法禁用它。

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

Answer 2

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

Answer 3

在 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

Answer 4

只需将模式设置为 iOS

<ion-button mode='ios'>

我如何 disable/remove ion-button Ionic 4 中的离子波纹效应？

How do I disable/remove ion-ripple effect in ion-button Ioinic 4?

ionic-framework

ionic4