如何將波紋效應添加到離子2元素中？

一些元素，比如按鈕，對Ionic 2本身就有漣漪效應。其他類似卡片的則不會。我怎麼能加入對任意離子2元素的漣漪效應的支持？如何將波紋效應添加到離子2元素中？

2016-08-03 Natanael

嘗試包裹喜歡的內容這個：

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

來源

2017-02-02 14:59:20

您需要使用button元素，你仍然可以有離子項指令：

來源：

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

要：

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

來源

2016-08-12 06:32:59

按鈕突破內容格式。例如，具有多行的內容將會內聯。 – Natanael

基於的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>

來源

2017-02-02 15:44:02 Natanael

正如我通過離子V3.3來源看到，容器元件必須包含空白div元件與button-effect類，也容器必須具有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); 
    } 
}

來源

2017-06-21 14:42:01

如何將波紋效應添加到離子2元素中？

回答

相關問題