Оглавление
Оглавление – компонент, позволяющий удобно взаимодействовать с оглавлением документа или любыми другими частями приложения (быстро ознакомиться с содержанием, переключиться на интересующий раздел).
Конфигурация
Для добавления оглавления на страницу, необходимо выполнить следующие действия:
- Добавить контрол TOC.View в шаблон разрабатываемого вами контрола;
- Определить обязательные опции:
- headings – для отображения самих заголовков оглавления;
- selectedKey – активный заголовок оглавления;
- onSelect – коллбек смены активного заголовка;
- pinned – для определения начального состояния панели оглавления (закрепленное/ незакрепленное);
- onPin – коллбек смены состояния панели (с закрепленного на незакрепленное и наоборот);
- expanded – состояние развернутости всех заголовков оглавления;
- onExpand – коллбек смены состояния развернутости всех узлов оглавления;
- Для поддержания адаптивного варианта надо будет добавить опцию viewMode в значении 'mobile';
- Если необходимо ограничить высоту незакрепленного меню воспользуйтесь опцией maxHeightMenu.
Настройка заголовков
Опция headings - массив заголовков, которые будут использоваться для взаимодействия с документом. Каждый заголовок представлен в виде объекта с следующими свойствами:
- id - уникальный идентификатор заголовка.
- level - уровень заголовка.
- text - отображаемый текст(название) заголовка
Для работы оглавления требуется как минимум 2 заголовка.
Пример настройки:
<!-- WML -->
<TOC.View
headings="{{ _headingList }}"/>
// TypeScript
protected _headingList = [{
id: 'c7bf8557-cdaa-4b31-8177-d96e2c09842d',
text: 'Заголовок 1 уровня',
level: 1
},
{
id: '94a5f68d-584d-41d8-aca5-3743d0644fdd',
text: 'Заголовок 2 уровня',
level: 2
},
{
id: '6d38cd6b-fcaa-4830-a224-506f83347e6a',
text: 'Еще один заголовок 2 уровня',
level: 2
},
{
id: '6d38cd6b-fcaa-4830-a224-506f83347e6a2',
text: 'Заголовок 3 уровня',
level: 3
}];
Настройка активного заголовка
Опция selectedKey - определяет текущий активный заголовок в оглавлении.
Опция onSelect - коллбек смены активного заголовка.
Пример настройки:
<!-- WML -->
<TOC.View
selectedKey="{{ _selectedKey }}"
onSelect="{{ _onSelect }}"
// TypeScript
// Задаем активный заголовк(id заголовка)
protected _selectedKey = 'c7bf8557-cdaa-4b31-8177-d96e2c09842d';
// Обновляем активный заголовок при клике по оглавлению
protected _onSelect = (value) => {
this._selectedKey = value;
//можно выполнять еще какие-то действия, например подскролл к нужному заголовку внутри документа
}
Настройка состояния оглавления
Оглавление может находится в двух состояних. Закрепленное и незакрепленное.
Опция pinned определяет состояние оглавления. Значении true соответствует закрепленному оглавлению, false - не закрепленному.
Опция onPin - коллбек смены состояния оглавления с закрепленного на незакрепленное и наоборот.
Пример настройки:
<!-- WML -->
<TOC.View
pinned="{{ _pinned }}"
onPin="{{ _onPin }}"
// TypeScript
// Устанавливаем начальное значение закреплности оглавления
//false - незакрепленное
//true - закрепленное
protected _pinned = false;
// Меняем состояние закрепленности оглавления
protected _onPin = () => {
this._pinned = !this._pinned
}
В результате получим оглавление в незакрепленном состоянии:


Настройка состояния развернутости заголовков
Опция expanded определяет в каком состоянии находятся заголовки оглавления. Значение true соответствует развернутым заголовкам, false - развернут активный заголовое и его родители.
Опция onExpand - коллбек смены состояния развернутости заголовков.
Пример настройки:
<!-- WML -->
<TOC.View
expanded="{{ _expanded }}"
onExpand="{{ _onExpand }}"
// TypeScript
// Начальное состояние развернутости узлов
protected _expanded = true;
// Меняем состояние развернутости узлов
protected _onExpand = () => {
this._expanded = !this._expanded;
}
В результате получим оглавление в котором развернуты все загловки:

Настройка адаптивного отображения
Опция viewMode - определяет режим отображения оглавления. 'mobile' - мобильный, 'default' - стандартный
Помимо опции необходимо добавить в нужное место документа контрол TOC.MobileButton
<!-- WML -->
<TOC.View viewMode="{{ _viewMode }}"/>
<!-- контрол кнопки вызова оглавления в мобильном отображении -->
<TOC.MobileButton />
// TypeScript
// Состояние отвечающие за включение адаптивного режима
protected _viewMode = 'mobile';
В результате получим кнопку вызова оглавления:

Настройка высоты незакрепленного меню
Опция maxHeightMenu - передается строкой в которой указывается желаемое значение.
Пример настройки:
<!-- WML -->
<TOC.View
maxHeightMenu="350px"
В результате получим:
