如何在Ionic 2元素中添加涟漪效果？

Question

一些元素，如按钮，Ionic 2 已经有本地水波纹效果。其他元素，如卡片则没有。我该如何为任意 Ionic 2 元素添加水波纹效果支持？

- Natanael

Answer 1

尝试像这样包装内容：

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

- kosiara - Bartosz Kosarzycki

---

完美运行，但内部ion-item不需要。 - Mohammed R. El-Khoudary

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);
    }
}

- Mikhail Nasyrov

---

谢谢您提供这个宝石。我一直在尝试更改涟漪的颜色，我目前的解决方案是一个CSS规则.button-effect{background-color: #FFF}。我该如何将其放入指令中？ - Shannon

指令不能包含模板或样式。您应该将此规则添加到具有全局CSS样式的CSS/SCSS文件中。如果您遵循Ionic项目结构，则可以使用“src/theme/variables.scss”。 - Mikhail Nasyrov

请注意，这里有一个更新的指令版本可在Ionic 3.9.2上运行，链接为：https://forum.ionicframework.com/t/ionic-ripple-effect-manually/52519/19 - Mikhail Nasyrov

Answer 3

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

来自：

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

致：

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

- Jad Joubran

---

按钮会破坏内容格式。例如，有多行的内容会变成单行显示。 - Natanael

@Natanael 如果你给按钮添加"text-wrap"会怎么样呢？<button ion-item text-wrap ...></button> - Dimas Crocco

当 ion item 内部有多个点击事件时，它会影响子内容。 - Khurshid Ansari

Answer 4

以下是基于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>

- Natanael

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>

：）

- frogcoder