class Tabs
- Extends:
- 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.
Constructor
constructor()
Creates a new Tabs component.
Parameters:
No parameters
Members
- [ readonly ] childCount
- [ readonly ] children
- [ readonly ] container
- [ readonly ] id
- [ readonly ] items
- [ readonly ] parent
- [ readonly ] screenPosition
- [ readonly ] selectedItem
Methods
From this class:
Inherited from UIComponent:
- addChild()
- addTo()
- anchor()
- background()
- border()
- bottom()
- center()
- child()
- childIndex()
- color()
- contextMenu()
- cursor()
- destroy()
- dragAction()
- dragData()
- dragDataType()
- dropAction()
- dropDataType()
- emit()
- emitFocusKeyEvents()
- enabled()
- focusable()
- focused()
- font()
- getAncestor()
- getWindow()
- height()
- hide()
- index()
- isInside()
- layer()
- maxSize()
- minSize()
- move()
- onAction()
- onAncestorEvents()
- onChange()
- onComponentEvents()
- onContainerEvents()
- onDispose()
- onDragEvents()
- onDropEvents()
- onError()
- onFocusEvents()
- onKey()
- onMouseEvents()
- onMouseMotion()
- onMouseWheel()
- onPropertyChange()
- opacity()
- position()
- remove()
- right()
- size()
- snapshot()
- text()
- tooltip()
- updateUI()
- 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);