Wie fügt man einem ionischen 2 Element einen Welleneffekt hinzu?

Question

Einige Elemente, wie der Knopf, haben auf ionic 2 einen natürlichen Welleneffekt. Andere wie Karten nicht. Wie könnte ich den Welleneffekt auf einem beliebigen Ionic 2-Element unterstützen?

Answer 1

Versuchen Sie, die Inhalte wie Einwickeln dies:

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

Answer 2

Sie müssen das button Element bedienen und Sie können immer noch die Ionen Artikel Richtlinie haben:

Von:

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

An:

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

Answer 3

Ein vollständigeres Beispiel auf der Grundlage der Antwort von 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

Wie ich von Quellen ionischer v3.3 sehen, muss ein Containerelement ein leeres div Element mit button-effect Klasse enthalten, auch muss der Behälter haben tappable Attribut und als position: relative; overflow: hidden gestylt werden.

In meinem Projekt verwende ich eine folgende Direktive zu Artknopf artigen Behältern:

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