Telerik UI Nativescript - эффект пульсации RadListView

Question

Я использую Radrikist Telerik UI компонент для NativeScript в мае приложение NativeScript Angular 2.

Когда я устанавливаю событие itemTap и / или itemHold, они работают очень хорошо, но без обычного эффекта касания (ряби) в строке списка.

Есть ли способ добавить этот эффект?

Спасибо всем заранее:)

Answer 1

Это как-то связано с классом "list-group-item", который вы добавляете в свой itemTemplate. Если вы удалите класс, вы сможете снова увидеть пульсации, но без стилизации... Я сделал следующее:

1) добавить этот CSS стиль

.list-group .list-group-item-ripple {
  color: #212121;
  font-size: 16;
  margin: 0;
  padding: 16;
}
.list-group .list-group-item-ripple Label {
  vertical-align: center;
}
.list-group .list-group-item-ripple .thumb {
  stretch: fill;
  width: 40;
  height: 40;
  margin-right: 16;
}
.list-group .list-group-item-ripple.active {
  background-color: #e0e0e0;
}
.list-group .list-group-item-ripple .list-group-item-text {
  color: #757575;
  font-size: 14;
}

теперь в вашем xml вместо использования класса "list-group-item" вы будете использовать "list-group-item-ripple".

Только это и должно работать. Обс.: Обратите внимание, что событие касания listview предназначено для использования с помощью тега "itemTap" ON "", а не как событие касания дочерних элементов!

Answer 2

На мой взгляд, это связано с плагином. В качестве решения вы могли бы установить tap событие в Ripple компонент и получить элемент id, который поможет вам отличить выбранный элемент. Я прилагаю пример кода.

Основной-page.xml

<Page xmlns:RL="nativescript-ripple" xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
 <GridLayout>
  <ListView items="{{ source }}"  loaded="onLoaded">
      <ListView.itemTemplate>
        <RL:Ripple rippleColor="#d50000" id="{{index}}" tap="onTap2">
            <StackLayout  >
                  <Label text="{{title}}" textWrap="true" />
            </StackLayout>
          </RL:Ripple>
      </ListView.itemTemplate>
  </ListView>

 </GridLayout>
</Page>

Основные-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
import {StackLayout} from "ui/layouts/stack-layout"

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
  // Get the event sender
  let page = <Page>args.object;
  var array=[];
  for(var i=0;i<100; i++)
  {
    array.push({index:""+i,title:"title "+i});
  }
  page.bindingContext = {"source":array};
}

export function onTap2(args){
  console.log("sample");
  var layouts = args.object;
  var id = layouts.get("id");
  console.log(id);
}