如何在离子按钮 Ionic 4 中禁用/移除离子波纹效应？答案

【问题标题】：How do I disable/remove ion-ripple effect in ion-button Ioinic 4?如何在离子按钮 Ionic 4 中禁用/移除离子波纹效应？
【发布时间】：2020-02-10 04:30:37
【问题描述】：

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

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

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

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

【问题讨论】：

标签： ionic-framework ionic4

【解决方案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

【讨论】：

【解决方案2】：

只需将模式设置为 iOS

<ion-button mode='ios'>

【讨论】：

【解决方案3】：

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

是的，所以我只是 checked the source code，它只与 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，而不是禁用它的方法。

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

【讨论】：

Web 组件封装使其变得困难。但是， mode="ios" 可以解决问题。谢谢：D
酷，如果您对它感到满意，请考虑标记为答案，这样其他人就不会浪费时间访问和阅读已解决的问题

【解决方案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

【讨论】：