Общие параметры в ui.entity-selector

В этой статье описаны общие структуры параметров для диалога, элементов, вкладок и тегов. Эти структуры используют несколько классов ui.entity-selector.

Параметры, которые относятся только к Dialog, описаны в статье Dialog. Параметры, которые относятся только к TagSelector, описаны в статье TagSelector.

Общие структуры используются в параметрах ItemOptions, TagItemOptions, TabOptions, TagSelectorOptions, HeaderOptions и FooterOptions.

Выбирайте уровень настройки по сценарию. Для одного элемента задавайте параметр в самом элементе. Для всех элементов типа объекта используйте EntityOptions.itemOptions или EntityOptions.tagOptions.

В примерах ниже классы импортируются из расширения ui.entity-selector.

import { Dialog, TagSelector, DefaultFooter } from 'ui.entity-selector';
        

Поля общих структур передаются только там, где нужно переопределить стандартное отображение. Обязательные поля сценарных объектов описаны в статьях Dialog и TagSelector.

TextNodeOptionsTextNodeOptions

TextNodeOptions задает текстовое или HTML-содержимое для заголовков, подзаголовков, подписей и бейджей.

const dialog = new Dialog({
            targetNode: button,
            items: [
                {
                    id: 1,
                    entityId: 'project',
                    title: {
                        text: '<b>Проект внедрения</b>',
                        type: 'HTML',
                    },
                },
            ],
        });
        

AvatarOptionsAvatarOptions

AvatarOptions задает визуальные параметры аватара элемента или тега.

В поля с CSS-значениями передавайте только значения, которые ожидает соответствующее CSS-свойство. Для изображений используйте заранее подготовленные пути или доверенные URL.

const selector = new TagSelector({
            tagAvatarOptions: {
                bgColor: '#e7f5ff',
                iconColor: '#1d6fd6',
            },
        });
        

CaptionOptionsCaptionOptions

CaptionOptions задает отображение подписи элемента или DOM-узла элемента.

Параметры подписи можно передать в ItemOptions.captionOptions или в параметры DOM-узла элемента.

BadgesOptionsBadgesOptions

BadgesOptions задает отображение группы бейджей элемента.

Параметры группы бейджей передавайте в ItemOptions.badgesOptions, если нужно настроить расположение всех бейджей элемента.

ItemBadgeOptionsItemBadgeOptions

ItemBadgeOptions задает один бейдж элемента.

Бейджи передаются в ItemOptions.badges. Для текста бейджа используйте строку или TextNodeOptions; HTML-содержимое передавайте только для доверенной разметки.

const dialog = new Dialog({
            targetNode: button,
            items: [
                {
                    id: 1,
                    entityId: 'project',
                    title: 'Проект внедрения',
                    badges: [
                        {
                            title: 'Новый',
                            bgColor: '#e7f5ff',
                            textColor: '#1d6fd6',
                        },
                    ],
                },
            ],
        });
        

HeaderOptions и FooterOptionsHeaderOptions и FooterOptions

HeaderOptions и FooterOptions — объекты с параметрами, которые получает класс заголовка или футера.

Строку в content, header или footer используйте для доверенной статической разметки. Если содержимое зависит от пользовательского ввода, создавайте DOM-узел и передавайте пользовательский текст как текстовое содержимое, а не как HTML-строку.

Для DefaultHeader и DefaultFooter доступны параметры:

Пользовательский класс заголовка или футера наследуйте от DefaultHeader, DefaultFooter, BaseHeader или BaseFooter. В классе на основе DefaultHeader или DefaultFooter переопределите getContent(). В классе на основе BaseHeader или BaseFooter переопределите render(). Собственные параметры читайте через getOption().

header и footer принимают строку, DOM-узел, массив DOM-узлов или класс. Если передан класс, параметры из headerOptions или footerOptions доступны через метод getOption().

class ProjectFooter extends DefaultFooter
        {
            getContent()
            {
                return this.getOption('label', 'Создать проект');
            }
        }
        
        const dialog = new Dialog({
            targetNode: button,
            footer: ProjectFooter,
            footerOptions: {
                label: 'Добавить проект',
            },
        });