Tab class

Class presents dialog tab.

Constructor

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

Creates a Tab class object. Use the method dialog.addTab or option tabs in class constructor Dialog for adding a tab into dialog.

• dialog — dialog object to add a new tab.
• tabOptions — tab options defined by the structure 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

  Tab ID. Required option.



• title?: string | TextNodeOptions

  Tab title.
  Defined either by string or structure TextNodeOptions.



• visible?: boolean

  Tab visibility. When set as false, tab is deemed as invisible with считается невидимой, для нее не отображается заголовок в виде ярлыка сбоку диалога. Default value: true.



• itemMaxDepth?: number

  Maximum level of item nesting displayed by visual offset. Default value: 5.



• itemOrder?: ItemNodeOrder

  Item sorting in tab. Defined by structure ItemNodeOrder.



• icon?: TabLabelStates | string

  Tab icon.
  Indicated either path to image or file in the format Data URL.
  Value is set either immediately for all tag statuses or separately for each status according to structure TabLabelStates.

  Structure TabLabelStates defines the option to indicate settings for various tab tag statuses.

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

  • default — default status.
  • selected — tab is selected.
  • hovered — mouse pointer hovers on the tab.
  • selectedHovered — tab is selected and mouse pointer hovers on it.


• textColor?: TabLabelStates | string

  Tab title text color.
  Values is specified either directly for all tab tag statuses or individually for each status according to structure TabLabelStates.



• bgColor?: TabLabelStates | string

  Tab title background.
  Values is passed immediately for all tab tag statuses or individually for each status according to the structure TabLabelStates.



• stub?: boolean | string | Function

  Defines "stub" for empty list of tabs. Default value: true — prints standard stub.
  Also this parameter can pass its own stub class (class descendant BaseStub) by two methods:

  • Full class name as a string.
  • Link to class constructor.


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

  Additional stub options.
  Standard stub (stub: true) have the following settings:

  • title: string — stub title.
  • subtitle: string — subtitle. Now specified by default.
  • icon: string — stub icon. Indicates either path to image or file in format Data URL. Default value is tag icon for the tab.
  • iconOpacity: number — icon transparency from 0 to 100. Default value: 35.
  • arrow: boolean — show arrow pointer. Default value: false.


• footer?: FooterContent

  Defines tab footer, where FooterContent represents the following type:

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

  Footer can be specified by several methods:

  • When layout is passed as DOM-node, array with DOM-nodes or text string - creates a default footer (class object DefaultFooter) with specified text content.
  • Creating an random footer requires passing either a link to class constructor (descendant BaseFooter or DefaultFooter) or to indicate full class name as a string.

  Link layout in footer have available CSS-classes:

  • .ui-selector-footer-link — standard link.
  • .ui-selector-footer-link ui-selector-footer-link-add — link to "plus" icon.
  • .ui-selector-footer-conjunction — for conjunction of words between links.


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

  Additional footer options. Passed to footer class constructor.



• showDefaultFooter?: boolean

  Defines, if to show dialog footer. Default value: true.



• showAvatars?: boolean

  Shows item avatars. Value is not defined by default, avatar display is defined by the dialog setting (similar option showAvatars).

Methods

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