Class: Tabs

Constructor

new Tabs()

Creates a new Tabs component.

Example

// Usage example

// create new Tabs component
this.tabs = new Tabs().addTo(this).position(15, 15, 15, 15).anchor("top right bottom left");

// One way to add a Panel to Tabs
this.loginPanel = new Panel().background(null);
this.tabs.add(this.loginPanel, {text: "Sign In", enabled: true, tooltip: "Log in to your account", icon: "images/user.png"});

// second way to add same panel and options
this.loginPanel = new Panel("Sign In").background(null).icon("images/user.png").addTo(this.tabs);
this.tabs.tooltipAt(0, "Log in to your account");

// third way to add same panel and options
this.loginPanel = new Panel().background(null);
this.tabs.add(this.loginPanel).textAt(0, "Sign In").iconAt(0, "images/user.png").tooltipAt(0, "Log in to your account").enabledAt(0, true);

Classes

Tabs

Members

(readonly) items :Array.<object>

Gets an array of objects about each tab. Each object format is: {text:string, tooltip:string, enables:boolean, selected:boolean, component: object}.

Type:

Array.<object>

(readonly) selectedItem :object|null

Gets information about selected Tab. Returned object format is: {index:number, text:string, tooltip:string, enables:boolean, component: object}.

Type:

object | null

Methods

add(component, optionsopt, indexopt) → {Tabs}

Adds a new tab with provided component as the main component of that tab. If options are passed, they will be used for tab text, icon, tooltip, etc.

Parameters:

Name	Type	Attributes	Description
`component`	object		A component that is allowed to be added to Tabs:
`options`	string \| object \| undefined	<optional>	Text of the new tab or an object containing one or more options {text:string, icon: string, tooltip: string, enabled: boolean, index: number}.
`index`	number \| undefined	<optional>	Index at which to insert the new tab. Default is last tab.

Returns:

Returns this Tabs component for method chaining.

Type:: Tabs

Example

// Setting multiple tab options
tabs.add(panel, {text:"Tab Name",icon:"icons/user.png",enabled:true,tooltip:"Create new user"});

// Setting tab name only (as a string)
tabs.add(panel, "Tab Name");

// Setting insert index
tabs.add(panel, "Tab Name", 2);

enabledAt(i, enabledopt) → {boolean|Tabs}

Sets or gets whether the tab at specified index is enabled. Setting it to false makes it disabled.

Parameters:

Name	Type	Attributes	Description
`i`	number		Index of the tab
`enabled`	boolean	<optional>	Set to `true` to enabled the tab, `false` to disable.

Returns:

When setting enabled argument, this Tabs component object is returned; otherwise current enabled state is returned.

Type:: boolean | Tabs

iconAt(i, iconopt) → {string|null|Tabs}

Sets or gets the icon for the tab at specified index.

Parameters:

Name	Type	Attributes	Description
`i`	number		Index of the tab
`icon`	string \| null	<optional>	Icon's path (URL, relative or absolute path) or base64 encoded image. Set `null` to remove current icon.

Returns:

When setting icon argument, this Tabs component object is returned; otherwise current icon is returned as base64 encoded string or null if the icon was not set.

Type:: string | null | Tabs

selected(indexopt) → {number|Tabs}

Sets or gets a selected tab index.

Parameters:

Name	Type	Attributes	Description
`index`	number	<optional>	Index of the tab to select. Out of bounds integer will not select anything)

Returns:

When setting an index, this Tabs component is returned; otherwise currently selected tab index is returned.

Type:: number | Tabs

sideTabsVertical(verticalopt) → {boolean|Tabs}

Sets or gets whether tabs on left or right side should be displayed vertically to take less space. Has no affect when tabs are at the top or bottom. Default is false.

Parameters:

Name	Type	Attributes	Description
`vertical`	boolean	<optional>	`true` for vertical, `false` for horizontal menu-like tab list (default).

Returns:

If setting value, this Tabs component object is returned; otherwise current value is returned.

Type:: boolean | Tabs

tabPosition(positionopt) → {string|Tabs}

Position of tabs: left, right, top, or bottom. Default is top.

Parameters:

Name	Type	Attributes	Description
`position`	string	<optional>	"top", "bottom", "left", or "right.

Returns:

If setting value, this Tabs component object is returned; otherwise current value is returned.

Type:: string | Tabs

textAt(i, textopt) → {string|Tabs}

Sets or gets the text of the tab at specified index.

Parameters:

Name	Type	Attributes	Description
`i`	number		Index of the tab
`text`	string	<optional>	New text for the tab

Returns:

When setting text argument, this Tabs component object is returned; otherwise current text is returned.

Type:: string | Tabs

tooltipAt(i, tooltipopt) → {string|Tabs}

Sets or gets the tooltip text for the tab at specified index.

Parameters:

Name	Type	Attributes	Description
`i`	number		Index of the tab
`tooltip`	string	<optional>	New tooltip text for the tab

Returns:

When setting tooltip argument, this Tabs component object is returned; otherwise current tooltip text is returned.

Type:: string | Tabs