Настройка фона

При размещении списочных контролов на "нестандартном фоне", отличающемся от фона по умолчанию, требуется задавать пользовательские стили. Они необходимы для настройки фона фиксированных прилипающих элементов (хлебных крошек, заголовков и т.д.).

Для этого предназначена опция 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>