Jak dodać efekt marszczenia do jonowego 2 elementu?

Question

Niektóre elementy, takie jak przycisk, mają natywny efekt marszczenia na Ionic 2. Inne karty nie. Jak mogę dodać obsługę efektu marszczenia dla dowolnego elementu Ionic 2?

Answer 1

Spróbuj zawijania zawartości takiego to:

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

Answer 2

trzeba użyć elementu button i nadal można mieć dyrektywę jonów produktu:

Od:

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

Do:

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

Answer 3

Pełniejszy przykład na podstawie odpowiedzi 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

Jak widzę ze źródeł jonowych v3.3, element pojemnik musi zawierać pusty div elementu z button-effect klasy, również pojemnik musi mieć Atrybut tappable ma styl position: relative; overflow: hidden.

W moim projekcie używam następującą dyrektywę do stylu guzików jak kontenerach:

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