Некоторые элементы, такие как кнопка, имеют собственный эффект пульсации на Ionic 2. Другие, такие как карты, не работают. Как я могу добавить поддержку эффекта пульсации на произвольный элемент Ionic 2?
Как добавить эффект пульсации к ионному 2-му элементу?
Ответ 1
Попробуйте обернуть содержимое следующим образом:
<button ion-item>
<ion-item style="background: rgba(0,0,0,0);">Content</ion-item>
</button>
Ответ 2
Как я вижу по источникам 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);
}
}
Ответ 3
Вам нужно использовать элемент button
и у вас все еще есть директива ion-item:
From:
<ion-item (click)="viewArticle()"></ion-item>
To:
<button ion-item (click)="viewArticle()"></button>
Ответ 4
Более полный пример, основанный на ответе Бартоша Косаржицки:
<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>