Làm thế nào để thêm hiệu ứng gợn sóng vào một phần tử ion 2?

Question

Một số yếu tố, như nút, có hiệu ứng gợn gốc trên Ionic 2. Những phần khác như thẻ không. Làm thế nào tôi có thể thêm hỗ trợ cho hiệu ứng gợn trên một yếu tố Ionic 2 tùy ý?

Answer 1

Hãy thử gói các nội dung như này:

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

Answer 2

Bạn cần phải sử dụng button yếu tố và bạn vẫn có thể có chỉ thị ion mục:

Từ:

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

Để:

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

Answer 3

Một ví dụ hoàn chỉnh hơn dựa trên câu trả lời của 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

Như tôi đã nhìn thấy bằng nguồn Ionic v3.3, một yếu tố container phải chứa một phần tử rỗng div với button-effect lớp, cũng container phải có tappable thuộc tính và được tạo kiểu như position: relative; overflow: hidden.

Trong dự án của tôi, tôi sử dụng một chỉ thị sau đây để đựng nút giống như phong cách:

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