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

Question

一些元素,如按钮,对Ionic 2有原生的连锁反应.其他像卡片则没有.如何在任意Ionic 2元素上添加对涟漪效应的支持？

Answer 1

尝试包装内容,如下所示:

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

Answer 2

正如我从Ionic v3.3的来源看到的那样,容器元素必须包含div带有button-effect类的空元素,容器必须具有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);
    }
}