Question

我需要在“离子按钮”中禁用默认的ion-ripple-effect。

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

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

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

Answer 1

只需将模式设置为iOS

<ion-button mode='ios'>

Answer 2

我认为它仅包含在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，而不是禁用它的方法。

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

Answer 3

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

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

name:

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

如何禁用/消除离子按钮Ioinic 4中的离子波纹效应？

4 个答案: