web-dev-qa-db-ja.com

ionic 2要素にリップル効果を追加するには？

ボタンなどの一部の要素は、Ionic 2にネイティブのリップル効果があります。カードなどの他の要素は、そうではありません。任意のIonic 2要素への波及効果のサポートをどのように追加できますか？

material-designionic2
14
Natanael

次のようにコンテンツをラップしてみてください。

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

Ionic v3.3のソースからわかるように、コンテナ要素にはbutton-effectクラスを持つ空の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);
    }
}
6
Mikhail Nasyrov

button要素を使用する必要がありますが、ion-itemディレクティブを引き続き使用できます。

から：

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

に：

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

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>
1
Natanael

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>

:)

0
frogcoder