एक आयनिक 2 तत्व में लहर प्रभाव कैसे जोड़ें?

Question

बटन जैसे कुछ तत्वों में आयनिक 2 पर देशी लहर प्रभाव पड़ता है 2. कार्ड जैसे अन्य लोग नहीं करते हैं। मैं मनमानी आयनिक 2 तत्व पर लहर प्रभाव के लिए समर्थन कैसे जोड़ सकता हूं?

Answer 1

की तरह सामग्री लपेटकर प्रयास करें यह:

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

Answer 2

आप button तत्व उपयोग करने की आवश्यकता है और आप अभी भी आयन आइटम निर्देश हो सकते हैं:

से:

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

करने के लिए:

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

Answer 3

एक और पूरी बार्तोज़ 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

जैसा कि मैंने आयोनिक 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); 
    } 
}