Как добавить эффект пульсации к ионному 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>