【问题标题】:How to remove click effect of an ion-item如何消除离子项目的点击效果
【发布时间】:2020-07-27 21:17:50
【问题描述】:

我想移除 ion-item 的点击效果。我使用了 --background-activated 和 --ripple-color 但没有任何反应。

.no-click{
--background-activated: transparent;
--ripple-color: transparent;
}

<ion-item class="no-click">
<ion-avatar slot="start">
<img [src]="img">
</ion-avatar>
<ion-label>{{name}}</ion-label>
</ion-item>

如何消除离子项目的点击效果?

【问题讨论】:

    标签: ionic-framework ionic4


    【解决方案1】:

    只需提供 pointer-events:none css 即可禁用点击。

     .no-click {
       pointer-events:none; //This makes it not clickable
     }
    
    
    <ion-item class="no-click">
        <ion-avatar slot="start">
            <img [src]="img">
            </ion-avatar>
         <ion-label>{{name}}</ion-label>
      </ion-item>
    

    【讨论】:

    • 这将消除波纹/点击效果并使元素不可点击。如果您希望继续接收点击事件的 ion-item 内部没有控件,则可以这样做
    【解决方案2】:

    我会将 no-ripple 类应用于 ion-item 并添加以下样式

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

    这将消除涟漪效应,但会保持元素可点击。例如,您可以在 ion-item 和 pointer-events:none 中使用 ion-checkbox;将阻止点击它,这可能不是您需要的行为。

    【讨论】:

      【解决方案3】:

      这确实有效!

      --ripple-color: transparent;
      --background-activated: transparent;
      --background-activated-opacity:transparent;
      --background-focused: transparent;
      --background-focused-opacity:transparent;
      --background-hover  : transparent;
      --background-hover-opacity  :transparent;
      

      【讨论】:

      • 非常感谢!这正确地消除了“涟漪”效应,同时仍然允许离子项目本身的点击事件。我很惊讶 ionic 的框架中还没有用于此的属性或实用程序类。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-07-07
      • 2015-09-10
      • 2018-03-14
      • 2018-05-10
      • 2022-01-15
      • 2020-08-04
      • 2016-11-26
      相关资源
      最近更新 更多