Класс ItemNode
Класс представляет визуальное представление (DOM-узел) элемента.
Конструктор
constructor(item: Item, nodeOptions: ItemNodeOptions): ItemNode
Создает объект класса ItemNode
.
Для создания DOM-узлов элемента используйте метод item.createNode() или опцию nodeOptions
в конструкторе класса Item.
item
— элемент (объект класса Item), для которого будет создан DOM-узел.nodeOptions
— опции элемента, которые определяются структуройItemNodeOptions
.
export type ItemNodeOptions = { itemOrder?: ItemNodeOrder, open?: boolean, dynamic?: boolean, title?: string | TextNodeOptions, subtitle?: string | TextNodeOptions, supertitle?: string | TextNodeOptions, caption?: string | TextNodeOptions, captionOptions?: CaptionOptions, avatar?: string, avatarOptions?: AvatarOptions, textColor?: string, link?: string, linkTitle?: string | TextNodeOptions, badges?: ItemBadgeOptions[], badgesOptions?: BadgesOptions, };
itemOrder?: ItemNodeOrder
Сортировка элементов внутри DOM-узла. Определяется структурой
ItemNodeOrder
:export type ItemNodeOrder = ( { [field: string]: 'asc' | 'desc' | 'asc nulls first' | 'asc nulls last' | 'desc nulls first' | 'desc nulls last' } | (a: ItemNode, b: ItemNode) => number );
В обычном случае указываются поля элемента, по которым необходимо сортировать.
const options = { itemOrder: { title: 'asc', sort: 'asc', id: 'desc' } };
Если сортировки по полям не хватает, можно определить свою функцию, определяющую порядок сортировки.
const options = { itemOrder: (nodeA: ItemNode, nodeB: ItemNode) => { const itemA = nodeA.getItem(); const itemB = nodeB.getItem(); return itemA.getSort() - itemB.getSort(); } };
open?: boolean
Определяет развернутость DOM-узла с вложенными элементами. Для динамических узлов значение
true
приводит к автоматической загрузке вложенных элементов.dynamic?: boolean
Определяет динамический узел. При нажатии на такой узел будет выполнен запрос на бэкенд для загрузки вложенных элементов-потомков.
title?: string | TextNodeOptions
Заголовок DOM-узла. Определяется либо строкой, либо структурой TextNodeOptions.
Если значение не задано, заголовок будет искаться у элемента, к которому относится DOM-узел.subtitle?: string | TextNodeOptions
Подзаголовок DOM-узла. Определяется либо строкой, либо структурой TextNodeOptions.
Если значение не задано, подзаголовок будет искаться у элемента, к которому относится DOM-узел.supertitle?: string | TextNodeOptions
Надзаголовок DOM-узла. Определяется либо строкой, либо структурой TextNodeOptions.
Если значение не задано, надзаголовок будет искаться у элемента, к которому относится DOM-узел.caption?: string | TextNodeOptions
Подпись DOM-узла. Определяется либо строкой, либо структурой TextNodeOptions.
Если значение не задано, подпись будет искаться у элемента, к которому относится DOM-узел.captionOptions?: CaptionOptions
Дополнительные настройки подписи элемента. Определяются структурой CaptionOptions.
Если значение не задано, настройки будут искаться у элемента, к которому относится DOM-узел.avatar?: string
Аватар DOM-узла. Указывается либо путь к изображению, либо файл в формате Data URL.
Если значение не задано, аватар будет искаться у элемента, к которому относится DOM-узел.avatarOptions?: AvatarOptions
Дополнительные настройки аватара DOM-узла.
Определяются структурой AvatarOptions. Если значение не задано, настройки аватара будут искаться у элемента, к которому относится DOM-узел.
textColor?: string
Цвет текста заголовка DOM-узла. Если значение не задано, цвет текста заголовка будет искаться у элемента, к которому относится DOM-узел.
link?: string
Адрес ссылки "подробнее". Если значение не задано, адрес ссылки будет искаться у элемента, к которому относится DOM-узел.
linkTitle?: string | TextNodeOptions
Заголовок ссылки "подробнее". Если значение не задано, заголовок ссылки будет искаться у элемента, к которому относится DOM-узел.
badges?: ItemBadgeOptions[]
Массив бейджей DOM-узла. Каждый бейдж определяется структурой ItemBadgeOptions.
Если значение не задано, бейджи будут искаться у элемента, к которому относится DOM-узел.badgesOptions?: BadgesOptions
Дополнительные настройки для блока с бейджами. Определяются структурой BadgesOptions.
Если значение не задано, настройки будут искаться у элемента, к которому относится DOM-узел.
Методы
Метод | Описание | С версии |
---|---|---|
getItem(): Item | Возвращает элемент, к которому относится DOM-узел. | |
getDialog(): Dialog | Возвращает диалог, в котором отрисован DOM-узел. | |
getTab(): Tab | Возвращает вкладку, в которой отрисован DOM-узел. | |
isRoot(): boolean | Возвращает true , если DOM-узел корневой.
Корневые узлы создаются автоматически для всех вкладок. Они не имеют визуального представления. | |
getParentNode(): ?ItemNode | Возвращает родительский DOM-узел. | |
getNextSibling(): ?ItemNode | Возвращает следующий соседний DOM-узел. | |
getPreviousSibling(): ?ItemNode | Возвращает предыдущий соседний DOM-узел. | |
addChildren(children: ItemOptions[]): void | Добавляет вложенные DOM-узлы. | |
addChild(child: ItemNode): ItemNode | Добавляет вложенный DOM-узел. | |
getDepthLevel(): number | Возвращает уровень вложенности DOM-узла. | |
addItem(item: Item, nodeOptions: ItemNodeOptions): ItemNode | Добавляет дочерний элемент. | |
hasItem(item: Item): boolean | Возвращает true , если среди потомков есть указанный элемент. | |
removeChild(child: ItemNode): boolean | Удаляет дочерний DOM-узел. | |
removeChildren(): void | Удаляет все дочерние DOM-узлы. | |
hasChild(child: ItemNode): boolean | Возвращает true , если указанный DOM-узел является потомком. | |
isChildOf(parent: ItemNode): boolean | Возвращает true , если указанный DOM-узел является родителем. | |
getFirstChild(): ?ItemNode | Возвращает первый дочерний DOM-узел. | |
getLastChild(): ?ItemNode | Возвращает последний дочерний DOM-узел. | |
getChildren(): OrderedArray | Возвращает сортированную коллекцию всех потомков. | |
hasChildren(): boolean | Возвращает true , если DOM-узел имеет потомков. | |
loadChildren(): Promise | Загружает дочерние элементы с бэкенда. | |
isOpen(): boolean | Возвращает true , если DOM-узел развернут (открыт). | |
setDynamic(dynamic: boolean): void | Устанавливает или отменяет динамичность DOM-узла. | |
isDynamic(): boolean | Возвращает true , если DOM-узел является динамическим. При нажатии на такой узел будет выполнен запрос на бэкенд для загрузки вложенных элементов-потомков. | |
isLoaded(): boolean | Возвращает true , если DOM-узел уже загрузил с бэкенда вложенные элементы. | |
expand(): void | Разворачивает DOM-узел, если он имеет потомков. | |
collapse(): void | Сворачивает DOM-узел, если он имеет потомков. | |
isRendered(): boolean | Возвращает true , если DOM-узел был вставлен в диалог и отрисован. | |
getTitle(): string | Возвращает заголовок DOM-узла. Если для DOM-узла значение не задано, заголовок будет искаться у элемента, к которому относится DOM-узел. | |
setTitle(title: string | TextNodeOptions): void | Устанавливает заголовок DOM-узла. Заголовок определяется либо строкой, либо структурой TextNodeOptions. | |
getSubtitle(): ?string | Возвращает подзаголовок DOM-узла.
Если для DOM-узла значение не задано, подзаголовок будет искаться у элемента, к которому относится DOM-узел. | |
setSubtitle(subtitle: string | TextNodeOptions): void | Устанавливает подзаголовок DOM-узла. Подзаголовок определяется либо строкой, либо структурой TextNodeOptions. | |
getSupertitle(): ?string | Возвращает надзаголовок DOM-узла.
Если для DOM-узла значение не задано, надзаголовок будет искаться у элемента, к которому относится DOM-узел. | |
setSupertitle(supertitle: string | TextNodeOptions): void | Устанавливает надзаголовок DOM-узла. Надзаголовок определяется либо строкой, либо структурой TextNodeOptions. | |
getCaption(): ?string | Возвращает подпись DOM-узла.
Если для DOM-узла значение не задано, подпись будет искаться у элемента, к которому относится DOM-узел. | |
setCaption(caption: string | TextNodeOptions): void | Устанавливает подпись DOM-узла. Подпись определяется либо строкой, либо структурой TextNodeOptions. | |
getAvatar(): ?string | Возвращает аватар DOM-узла.
Если для DOM-узла значение не задано, аватар будет искаться у элемента, к которому относится DOM-узел. | |
setAvatar(avatar: ?string): void | Устанавливает аватар DOM-узла. Указывается либо путь к изображению, либо файл в формате Data URL. | |
getAvatarOption(option: $Keys | Возвращает значение настройки для аватара DOM-узла.
Название опции option определяется ключами структуры AvatarOptions.
Если для DOM-узла значение не задано, опция будет искаться у элемента. | 21.600.0 |
setAvatarOption(option: $Keys | Устанавливает значение опции для аватара DOM-узла.
Название опции option определяется ключами структуры AvatarOptions. | 21.600.0 |
setAvatarOptions(options: AvatarOptions): void | Устанавливает настройки для аватара DOM-узла.
Настройки option определяются структурой AvatarOptions. | 21.600.0 |
getTextColor(): ?string | Возвращает цвет текста заголовка DOM-узла.
Если для DOM-узла значение не задано, цвет текста заголовка будет искаться у элемента, к которому относится DOM-узел. | |
setTextColor(textColor: ?string): void | Устанавливает цвет текста заголовка DOM-узла. | |
getLink(): ?string | Возвращает адрес ссылки "подробнее".
Если для DOM-узла значение не задано, адрес ссылки будет искаться у элемента, к которому относится DOM-узел. | |
setLink(link: string): void | Устанавливает адрес ссылки "подробнее". | |
getLinkTitle(): ?string | Возвращает заголовок ссылки "подробнее".
Если для DOM-узла значение не задано, заголовок ссылки будет искаться у элемента, к которому относится DOM-узел. | |
setLinkTitle(title: string | TextNodeOptions): void | Устанавливает заголовок ссылки "подробнее". Заголовок определяется либо строкой, либо структурой TextNodeOptions. | |
getBadges(): ItemBadge[] | Возвращает массив бейджей (объекты класса ItemBadge) DOM-узла. Если для DOM-узла значение не задано, бейджи будут искаться у элемента, к которому относится DOM-узел. | |
setBadges(badges: ?ItemBadgeOptions[]): void | Устанавливает бейджи DOM-узла. Каждый бейдж определяется структурой ItemBadgeOptions. | |
focus(): void | Устанавливает фокус на DOM-узле. | |
unfocus(): void | Сбрасывает фокус на DOM-узле. | |
isFocused(): boolean | Возвращает true , если на DOM-узле установлен фокус. | |
click(): void | Эмулирует нажатие пользователя DOM-узел. | |
scrollIntoView(): void | Скроллирует содержимое вкладки, чтобы DOM-узел находился в области видимости. |
Пользовательские комментарии
Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.Для этого нужно всего лишь авторизоваться на сайте
Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.
Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.