Карусель
Carousel/View
- это интерфейсный контрол, предназначенный для отображения данных в виде горизонатльного списка с прокуруткой (карусели) и возможностью выбора элемента.
Конфигурация
Контрол имеет следующие опции:
- source — Источник данных контрола;
- itemTemplate — Пользовательский шаблон элемента;
- selectedKey — Ключ выбранного элемента;
- keyProperty — Имя свойства, содержащего информацию об идентификаторе текущего элемента;
- filter — Конфигурация объекта фильтра.
Рассмотрим простейший пример создания карусели.
itemTemplate
При установке пользовательского шаблона обязателен вызов шаблона по умолчанию wml!Carousel/templates/defaultTemplate. Это необходимо для наложения базовых стилей и корректной работы опции readOnly.
Данные элемента из источника будут доступны в itemTemplate.item
<!-- WML -->
<Carousel.View ...>
<ws:itemTemplate>
<ws:partial template="wml!Carousel/templates/defaultTemplate">
<!-- Пользовательский шаблон -->
<div style="background-color: {{itemTemplate.item.bgColor}}">
<div class="myCarousel__item">
{{itemTemplate.item.id}} - {{itemTemplate.item.demoText}}
</div>
</div>
</ws:partial>
</ws:itemTemplate>
</Carousel.View>
source
Установим источник данных для шаблона из предыдущего примера.
<!-- WML -->
<Carousel.View source="{{_source}}" ...>
...
</Carousel.View>
// TypeScript
...
export default class MyCarousel extends Control<...> {
...
protected _source: Memory = new Memory({
data: [
{
id: '1',
demoText: 'Item 1',
bgColor: '#999999'
}, {
id: '2',
demoText: 'Item 2',
bgColor: '#D04D4D'
}, {
id: '3',
demoText: 'Item 3',
bgColor: '#72be44'
}
],
keyProperty: 'id'
});
}
selectedKey и keyProperty
Важно отметить, что ключ выбранного элемента не работает автономно и нуждается в синхронизации с помощью директивы bind. По клику на элемент генерируется событие selectedKeyChanged с идентификатором выбранного элемента.
Установим имя свойства идентификатора и ключ выбранного элемента для предыдущих примеров.
<!-- WML -->
<Carousel.View keyProperty="id" bind:selectedKey="_selectedKey" ...>
...
</Carousel.View>
// TypeScript
...
export default class MyCarousel extends Control<...> {
...
protected _selectedKey: string = '1';
}
filter
Фильтр отправляется в запрос к источнику для получения данных. В данном примере в списке будет отображаться 2 элемента:
<!-- WML -->
<Controls.list:View
keyProperty="id"
filter="{{_filter}}"
source="{{_source}}" />
// JavaScript
this._filter = {id: ['1', '2']};
this._source = new Memory({
keyProperty: 'id',
data: [
{
id: '1',
title: 'Yaroslavl'
},
{
id: '2',
title: 'Moscow'
},
{
id: '3',
title: 'St-Petersburg'
}
]
});
Полный демо-пример можно найти в документации к контролу.