Класс 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).

Методы

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