class Tabs

Extends:

ContainerComponent, UIComponent

Description:

A Tabs UI component is a set of linked panels where only one panel is visible at a time, and users can switch between them by clicking tab headers. It’s commonly used to organize related content into separate views. This helps save space and makes navigation more intuitive.
Extends ContainerComponent, which extends UIComponent.

Constructor

constructor

Creates a new Tabs component.

Members

• [ readonly ] childCount
• [ readonly ] children
• [ readonly ] id
• [ readonly ] isContainer
• [ readonly ] items
• [ readonly ] parent
• [ readonly ] screenPosition
• [ readonly ] selectedItem
• [ readonly ] window

Methods

From this class:

• add()
• enabledAt()
• iconAt()
• selected()
• sideTabsVertical()
• tabPosition()
• textAt()
• tooltipAt()

Inherited from ContainerComponent:

• addChild()
• child()
• childIndex()
• onContainerEvents()
• removeChild()

Inherited from UIComponent:

• addTo()
• anchor()
• background()
• border()
• bottom()
• center()
• color()
• contextMenu()
• cursor()
• destroy()
• dragAction()
• dragData()
• dragDataType()
• dropAction()
• dropDataType()
• emit()
• emitFocusKeyEvents()
• enabled()
• focusable()
• focused()
• font()
• getAncestor()
• height()
• hide()
• index()
• isInside()
• layer()
• maxSize()
• minSize()
• move()
• onAction()
• onAncestorEvents()
• onChange()
• onComponentEvents()
• onDispose()
• onDragEvents()
• onDropEvents()
• onError()
• onFocusEvents()
• onKey()
• onMouseEvents()
• onMouseMotion()
• onMouseWheel()
• onPropertyChange()
• onShortcut()
• opacity()
• position()
• remove()
• right()
• shortcuts()
• size()
• snapshot()
• text()
• tooltip()
• update()
• verifyComponent()
• visible()
• width()
• x()
• y()

Examples:

// 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);