Настройка фона
При размещении списочных контролов на "нестандартном фоне", отличающемся от фона по умолчанию, требуется задавать пользовательские стили. Они необходимы для настройки фона фиксированных прилипающих элементов (хлебных крошек, заголовков и т.д.).
Для этого предназначена опция backgroundStyle. Строка, переданная в эту опцию, будет использована для формирования CSS-класса, например, для backgroundStyle=stack
будут сформированы следующие css-классы:
controls-background-stack,
// стиль применяется при наличии горизонтального скрола для установки цвета тени,
// отображаемой с левой и с правой стороны прокручиваемой области.
controls-ColumnScroll__shadow-stack
<!-- WML -->
<Controls.list:View
source="{{_viewSource}}"
backgroundStyle="stack" />
Настройка фона строки
Фон конкретного элемента списка задается в опции backgroundColorStyle.
В следующем примере для элементов списка задан зеленый или красный фон.
<!-- WML -->
<Controls.list:View source="{{_viewSource}}">
<ws:itemTemplate>
<ws:partial template="Controls/list:ItemTemplate"
backgroundColorStyle="{{getBackgroundColorStyle(itemTemplate.item.key + 1)}}"/>
</ws:itemTemplate>
</Controls.list:View>
Стиль подсветки строки при наведении курсора мыши
Чтобы настроить стиль подсветки строки при наведении курсора мыши, установите значение для опции hoverBackgroundStyle. По умолчанию подсветка соответствует @background-color.
Для опции рекомендуется использовать значения из набора стандартных фонов.
В следующем примере при наведении курсора мыши на элемент изменяется фон строки.
<!-- WML -->
<Controls.list:View
source="{{_viewSource}}"
hoverBackgroundStyle="primary" />
Подсветка определённой части строки при наведении курсора мыши
В некоторых случаях, в соответствии с дизайном реестра, при наведении курсора мыши необходимо подсвечивать не всю строку, а только её определённую часть. Для этого в шаблоне отображения элемента можно задать область подсветки, указан CSS-класс controls-hover-background-default на определнном блоке div внутри такого шаблона.
В следующем примере для плоского списка подсветка при наведении курсора будет происходить только внутри блока "balloon".
<!-- WML -->
<Controls.list:View
source="{{_viewSource}}"
itemActions="{{_itemActions}}"
itemActionsPosition="custom">
<ws:itemTemplate>
<ws:partial template="Controls/list:ItemTemplate"
highlightOnHover="{{ false }}"
showItemActionsOnHover="{{ false }}">
<ws:contentTemplate>
<div class="balloon controls-ListView__item_showActions controls-hover-background-default">
<div>country: {{ contentTemplate.item.getContents().get('country') }}</div>
<ws:partial template="{{contentTemplate.itemActionsTemplate}}"/>
</div>
</ws:contentTemplate>
</ws:partial>
</ws:itemTemplate>
</Controls.list:View>
Видимость подсветки строки при наведении курсора мыши
По умолчанию подсветка строки при наведении курсора мыши включена. Чтобы отключить подсветку, установите опцию highlightOnHover в значение false.
В следующем примере подсветка элементов отключена.
<!-- WML -->
<Controls.list:View source="{{_viewSource}}">
<ws:itemTemplate>
<ws:partial template="Controls/list:ItemTemplate"
highlightOnHover="{{false}}"/>
</ws:itemTemplate>
</Controls.list:View>