如何为离子 2 元素添加涟漪效应？

Question

某些元素（例如按钮）在 Ionic 2 上具有原生连锁反应。其他元素（例如卡片）则没有。我如何添加对任意 Ionic 2 元素的涟漪效应的支持？

Answer 1

您需要使用 button 元素你仍然可以使用 ion-item 指令：

发件人：

<ion-item (click)="viewArticle()"></ion-item>

收件人：

<button ion-item (click)="viewArticle()"></button>

Answer 2

尝试像这样包装内容：

<button ion-item>
   <ion-item style="background: rgba(0,0,0,0);">Content</ion-item>
</button>

Answer 3

基于 Bartosz Kosarzycki 的回答的更完整的示例：

                <ion-list>
                      <button ion-button style="height: auto!important;width: 100%" clear >
                            <ion-item style="background: rgba(0,0,0,0);">
                                  <ion-icon name="car" item-left></ion-icon>
                                  <h1>Title 1</h1>
                                  <p>Subtítulo</p>
                                  <ion-icon name="person" item-right></ion-icon>
                            </ion-item>
                      </button>
                      <button ion-button style="height: auto!important;width: 100%" clear>
                            <ion-item style="background: rgba(0,0,0,0);">
                                  <ion-icon name="person" item-left></ion-icon>
                                  <h1>Title 2</h1>
                                  <p>Subtítulo</p>
                                  <ion-icon name="car" item-right></ion-icon>
                            </ion-item>
                      </button>
                </ion-list>

Answer 4

正如我从 Ionic v3.3 的源代码中看到的那样，容器元素必须包含一个带有 button-effect class 的空 div 元素，并且容器必须具有 tappable 属性并设置样式为 position: relative; overflow: hidden.

在我的项目中，我使用以下指令来设置类似按钮的容器的样式：

import {Directive, ElementRef, Host, Renderer2} from '@angular/core';

@Directive({
    selector: '[m-ripple-effect]',
    host: {
        'tappable': '',
        'role': 'button',
        'style': 'position: relative; overflow: hidden'
    }
})
export class RippleEffectDirective {
    constructor(@Host() host: ElementRef, renderer: Renderer2) {
        const div = renderer.createElement('div');
        renderer.addClass(div, 'button-effect');
        renderer.appendChild(host.nativeElement, div);
    }
}

Answer 5

对于 IONIC 4，您现在可以这样使用：

确保你div位置是相对的。

 <div
  ion-activatable
  class="ion-activatable"
  style="position:relative;height:100px;width:100%;background:blue;">
  <ion-ripple-effect></ion-ripple-effect>
  Content here...
</div>

:)

如何为离子 2 元素添加涟漪效应？

How to add ripple effect to an ionic 2 element?

material-design

ionic2