Маркер
Маркер используется в качестве индикатора выбранного в данный момент элемента списка. Маркером списка управляет сам список. По умолчанию маркер изначально не виден и отображается только после взаимодействия пользователя со списком.
Документация 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}}" />
События маркера
До изменения ключа маркера происходит событие 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;
}
}