一些元素,如按钮,对Ionic 2有原生的连锁反应。其他像卡片则没有。如何在任意Ionic 2元素上添加对涟漪效应的支持?
尝试包装内容,如下所示:
<button ion-item>
<ion-item style="background: rgba(0,0,0,0);">Content</ion-item>
</button>
正如我从Ionic 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);
}
}
你需要使用button
元素,你仍然可以使用ion-item指令:
从:
<ion-item (click)="viewArticle()"></ion-item>
至:
<button ion-item (click)="viewArticle()"></button>
基于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>
对于IONIC 4,您现在可以像这样使用:
确保div位置是相对的。
<div
ion-activatable
class="ion-activatable"
style="position:relative;height:100px;width:100%;background:blue;">
<ion-ripple-effect></ion-ripple-effect>
Content here...
</div>
:)