Маркер

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

Документация 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>

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

Размер маркера настраивается в опции markerSize.

Если в элементе много контента, на уровне шаблона отображения элемента передайте в опцию markerSize значение content-xl.

<Controls.grid:View 
    source="{{ source }}"
    columns="{{ _columns }}"
    markerVisibility="visible">
    <ws:itemPadding top="{{ padding }}"/>
    <ws:itemTemplate>
        <ws:partial template="Controls/grid:ItemTemplate" 
                    markerSize="content-xl"/>
    </ws:itemTemplate>
</Controls.grid:View>

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

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

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

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

<!-- WML -->
<Controls.treeGrid:View
   source="{{_viewSource}}"
   columns="{{_columns}}"
   parentProperty="parent"
   nodeProperty="type"
   markItemByExpanderClick="{{false}}" />

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

До изменения ключа маркера происходит событие beforeMarkedKeyChanged. В следующем примере установка маркера происходит с задержкой в 1 секунду.

<!-- WML -->
<Controls.list:View
   source="{{_viewSource}}"
   markerVisibility="visible"
   on:beforeMarkedKeyChanged="_onBeforeMarkedKeyChanged()"/>

// TypeScript
_onBeforeMarkedKeyChanged(event: SyntheticEvent, key: CrudEntityKey): CrudEntityKey | Promise<CrudEntityKey> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(key);
        }, 1000);
    });
}

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

<!-- WML -->
<Controls.list:View
   source="{{_viewSource}}"
   markerVisibility="visible"
   markedKey="{{_markedKey}}"
   on:markedKeyChanged="_onMarkedKeyChanged()"/>

// TypeScript
_onMarkedKeyChanged(event: SyntheticEvent, key: CrudEntityKey): void {
    const item = this._items.getRecordById(key);
    if (item && item.get('markable') === true) {
        this._markedKey = key;
    }
}