Документация для разработчиков
Темная тема

Класс Tab

Класс представляет вкладку диалога.

Конструктор

constructor(dialog: Dialog, tabOptions: TabOptions): Tab

Создает объект класса Tab. Для добавления вкладки в диалог используйте метод dialog.addTab или опцию tabs в конструкторе класса Dialog.

  • dialog — объект диалога, в который будет добавлена новая вкладка.
  • tabOptions — опции вкладки, которые определяются структурой TabOptions.

export type TabOptions = {
	id: string,
	title?: string | TextNodeOptions,
	visible?: boolean,
	itemMaxDepth?: number,
	itemOrder?: ItemNodeOrder,
	icon?: TabLabelStates | string,
	textColor?: TabLabelStates | string,
	bgColor?: TabLabelStates | string,
	stub?: boolean | string | Function,
	stubOptions?: { [option: string]: any },
	footer?: FooterContent,
	footerOptions?: { [option: string]: any },
	showDefaultFooter?: boolean,
	showAvatars?: boolean
};

  • id: string

    Идентификатор вкладки. Обязательная опция.


  • title?: string | TextNodeOptions

    Заголовок вкладки.
    Определяется либо строкой, либо структурой TextNodeOptions.


  • visible?: boolean

    Видимость вкладки. Если задано значение false, вкладка считается невидимой, для нее не отображается заголовок в виде ярлыка сбоку диалога. По умолчанию true.


  • itemMaxDepth?: number

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


  • itemOrder?: ItemNodeOrder

    Сортировка элементов на вкладке. Определяется структурой ItemNodeOrder.


  • icon?: TabLabelStates | string

    Иконка вкладки.
    Указывается либо путь к изображению, либо файл в формате Data URL.
    Значение задается либо сразу для всех состояний ярлыка вкладки, либо отдельно для каждого состояния согласно структуре TabLabelStates.

    Структура TabLabelStates определяет возможность указать настройки для разных состояний ярлыка вкладки.

    export type TabLabelStates = {
    	default?: string,
    	selected?: string,
    	hovered?: string,
    	selectedHovered?: string
    }
    

    • default — состояние по умолчанию.
    • selected — вкладка выбрана.
    • hovered — над вкладкой находится курсор мыши.
    • selectedHovered — вкладка выбрана и над ней находится курсор мыши.

  • textColor?: TabLabelStates | string

    Цвет текста заголовка вкладки.
    Значение задается либо сразу для всех состояний ярлыка вкладки, либо отдельно для каждого состояния согласно структуре TabLabelStates.


  • bgColor?: TabLabelStates | string

    Фон заголовка вкладки.
    Значение задается либо сразу для всех состояний ярлыка вкладки, либо отдельно для каждого состояния согласно структуре TabLabelStates.


  • stub?: boolean | string | Function

    Определяет "заглушку" пустого списка вкладки. По умолчанию true — выводится стандартная заглушка.
    Также в этот параметр можно передать свой класс заглушки (наследник класса BaseStub) двумя способами:

    • Полное название класса в виде строки.
    • Ссылка на конструктор класса.

  • stubOptions?: { [option: string]: any }

    Дополнительные опции заглушки.
    Для стандартной заглушки (stub: true) доступны следующие настройки:

    • title: string — заголовок заглушки.
    • subtitle: string — подзаголовок. По умолчанию не задан.
    • icon: string — иконка заглушки. Указывается либо путь к изображению, либо файл в формате Data URL. По умолчанию берется иконка ярлыка вкладки.
    • iconOpacity: number — прозрачность иконки от 0 до 100. По умолчанию 35.
    • arrow: boolean — выводить стрелочку. По умолчанию false.

  • footer?: FooterContent

    Определяет футер вкладки, где FooterContent представляет следующий тип:

    export type FooterContent = string | HTMLElement | HTMLElement[] | Function;
    

    Футер можно задать несколькими способами:

    • Если передана верстка в виде DOM-узла, массива DOM-узлов или текстовой строки, будет создан футер по умолчанию (объект класса DefaultFooter) с указанным текстовым контентом.
    • Для создания произвольного футера необходимо передать либо ссылку на конструктор класса (наследник BaseFooter или DefaultFooter), либо указать полное имя класса в виде строки.

    Для верстки ссылок в футере доступны следующие CSS-классы:

    • .ui-selector-footer-link — обычная ссылка.
    • .ui-selector-footer-link ui-selector-footer-link-add — ссылка с иконкой "плюс".
    • .ui-selector-footer-conjunction — для оформления связующих слов между ссылками.

  • footerOptions?: { [option: string]: any }

    Дополнительные опции футера. Передаются в конструктор класса футера.


  • showDefaultFooter?: boolean

    Определяет, нужно ли показывать футер диалога. По умолчанию true.


  • showAvatars?: boolean

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

Методы

Метод Описание С версии
getId(): string Возвращает идентификатор вкладки.
getDialog(): Dialog Возвращает объект диалога.
getStub(): ?BaseStub Возвращает объект заглушки для пустого списка.
getFooter(): ?BaseFooter Возвращает объект футера.
setFooter(footerContent: ?FooterContent, footerOptions?: { [option: string]: any }) Устанавливает или удаляет футер вкладки.
  • footerContentконтент футера. Если указан null, футер удаляется.
  • footerOptions — дополнительные опции футера.
enableDefaultFooter(): void Включает отображение футера диалога.
disableDefaultFooter(): void Выключает отображение футера диалога.
setShowAvatars(flag: ?boolean): void Включает или отключает показ аватаров во вкладке. По умолчанию отображение аватаров определяется опцией showAvatars в диалоге.
getRootNode(): ItemNode Возвращает корневой узел вкладки.
setTitle(title: string | TextNodeOptions): void Устанавливает заголовок вкладки. Заголовок определяется либо строкой, либо структурой TextNodeOptions.
getTitle(): ?string Возвращает заголовок вкладки.
setIcon(icon: TabLabelStates | string): void Устанавливает иконку вкладки либо для всех состояний ярлыка, либо отдельно для каждого состояния согласно структуре TabLabelStates.
getIcon(state?: TabLabelState): ?string Возвращает иконку вкладки для конкретного состояния ярлыка.

Состояния ярлыка определяются структурой TabLabelState.

export type TabLabelState = 
	'default' | 
	'selected' | 
	'hovered' | 
	'selectedHovered'
;

  • default — состояние по умолчанию.
  • selected — вкладка выбрана.
  • hovered — над вкладкой находится курсор мыши.
  • selectedHovered — вкладка выбрана и над ней находится курсор мыши.
setBgColor(bgColor: TabLabelStates | string): void Устанавливает цвет фона заголовка вкладки либо для всех состояний ярлыка, либо отдельно для каждого состояния согласно структуре TabLabelStates.
getBgColor(state?: TabLabelState): ?string Возвращает цвет фона заголовка вкладки для конкретного состояния ярлыка. Состояния ярлыка определяются структурой TabLabelState.
setTextColor(textColor: TabLabelStates | string): void Устанавливает цвет текста заголовка вкладки либо для всех состояний ярлыка, либо отдельно для каждого состояния согласно структуре TabLabelStates.
getTextColor(state?: TabLabelState): ?string Возвращает цвет текста заголовка вкладки для конкретного состояния ярлыка. Состояния ярлыка определяются структурой TabLabelState.
setItemMaxDepth(depth: number): void Устанавливает максимальный уровень вложенности элементов, который отображается визуальным сдвигом.
getItemMaxDepth(): number Возвращает максимальный уровень вложенности элементов, который отображается визуальным сдвигом.
isVisible(): boolean Возвращает true, если вкладка видима в диалоге (отображается заголовок в виде ярлыка сбоку диалога).
setVisible(flag: boolean): void Устанавливает видимость вкладки.
isRendered(): boolean Возвращает true, если вкладка добавлена в диалог и отрисована.
isSelected(): boolean Возвращает true, если вкладка выбрана.

© «Битрикс», 2001-2024, «1С-Битрикс», 2024