Маркер

Маркер используется в качестве индикатора выбранного в данный момент элемента списка. Маркером списка управляет сам список. По умолчанию маркер изначально не виден и отображается только после взаимодействия пользователя со списком.

Пример
Исходный код

Документация API Спецификация Axure

В редких случаях, может возникнуть необходимость "вручную" управлять выделением маркером. Для этого в конфигурации списка с помощью директивы bind свяжите значение опции markedKey со свойством контрола.

<!-- WML -->
<Controls.list:View
   source="{{_viewSource}}"
   bind:markedKey="_markedKey"/>
// TypeScript
_markedKey = 10;

Отображение маркера

В ряде случаев необходимо показывать маркер всегда, даже если не задан идентификатор в опции markedKey. Для этого задайте в опции markerVisibility значение "visible".

В следующем примере маркер отображается при инициализации списка.

Пример
Исходный код
<!-- WML -->
<Controls.list:View
   source="{{_viewSource}}"
   markerVisibility="visible"/>

Отключение выделения маркером

В ряде случаев можно отключать видимость маркера как для всех элементов списка, так и для отдельного элемента.

Для всех элементов

Чтобы отключить видимость маркера для всех элементов списка, задайте в опции markerVisibility значение "hidden".

В следующем примере маркер скрыт.

Пример
Исходный код
<!-- WML -->
<Controls.list:View
   source="{{_viewSource}}"
   markerVisibility="hidden"/>

Для отдельного элемента

Чтобы отключить видимость маркера для отдельного элемента списка, на уровне шаблона отображения элемента задайте в опции marker значение false.

В следующем примере маркер скрыт для элемента с id=1.

Пример
Исходный код
<!-- WML -->
<Controls.list:View source="{{_viewSource}}">
   <ws:itemTemplate>
      <ws:partial
         template="Controls/list:ItemTemplate"
         marker="{{itemTemplate.item.contents.id === 1 ? false: true}}"/> 
   </ws:itemTemplate>
</Controls.list:View>

Размер маркера

По умолчанию маркер по высоте растягивается на весь контейнер элемента. Чтобы задать другой размер маркера для всех элементов списка, на уровне шаблона отображения элемента в опции markerClassName задайте соответствующее значение.

Пример
Исходный код

Ниже приведен пример настройки маркера размера "text-xs".

<!-- WML -->
<Controls.grid:View
    source="{{_viewSourceText}}"
    markerVisibility="visible"
    columns="{{_columnsText}}">
    <ws:itemPadding top="s"/>
       <ws:itemTemplate>
         <ws:partial template="Controls/grid:ItemTemplate" scope="{{ itemTemplate }}"
            markerClassName="text-xs"/>
      </ws:itemTemplate>
</Controls.grid:View>

При размещении маркера рядом с изображением используйте следующие значения: "default", "image-l", "image-m", "image-s", "image-xs".

Ниже приведен пример настройки маркера размера "image-l".

<!-- WML -->
<Controls.grid:View
   source="{{_viewSourceImage}}"
   columns="{{_columnsImage}}"
   markerVisibility="visible">
   <ws:itemTemplate>
      <ws:partial template="Controls/grid:ItemTemplate" scope="{{ itemTemplate }}"
         markerClassName="image-l"/>
   </ws:itemTemplate>
</Controls.grid:View>

Выделение узла дерева маркером

По умолчанию узел дерева отмечается маркером при клике на кнопку разворота узла. Чтобы отключить выделение узла дерева, в опции markItemByExpanderClick установите значение false.

В примере ниже отключено выделение узлов дерева маркером, если выполнен клик по кноке разворота.

Пример
Исходный код
<!-- WML -->
<Controls.treeGrid:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="parent"
   nodeProperty="type"
   markItemByExpanderClick="{{false}}" />

События маркера

При выделении пользователем элемента списка происходит событие markedKeyChanged.

До изменения ключа маркера происходит событие beforeMarkedKeyChanged.