Skip to content

TabControl

The TabControl is a container that provides tabbed interface functionality

Extends: Container

Examples (Executable)

lua
local basalt = require("basalt")

local main = basalt.getMainFrame()

-- Create a simple TabControl
local tabControl = main:addTabControl({
x = 2,
y = 2,
width = 46,
height = 15,
})

-- Tab 1: Home
local homeTab = tabControl:newTab("Home")

homeTab:addLabel({
x = 2,
y = 2,
text = "Welcome!",
foreground = colors.yellow
})

homeTab:addLabel({
x = 2,
y = 4,
text = "This is a TabControl",
foreground = colors.white
})

homeTab:addLabel({
x = 2,
y = 5,
text = "example with tabs.",
foreground = colors.white
})

-- Tab 2: Counter
local counterTab = tabControl:newTab("Counter")

local counterLabel = counterTab:addLabel({
x = 2,
y = 2,
text = "Count: 0",
foreground = colors.lime
})

local count = 0
counterTab:addButton({
x = 2,
y = 4,
width = 12,
height = 3,
text = "Click Me",
background = colors.blue
})
:setBackgroundState("clicked", colors.lightBlue)
:onClick(function()
count = count + 1
counterLabel:setText("Count: " .. count)
end)

-- Tab 3: Info
local infoTab = tabControl:newTab("Info")

infoTab:addLabel({
x = 2,
y = 2,
text = "TabControl Features:",
foreground = colors.orange
})

infoTab:addLabel({
x = 2,
y = 4,
text = "- Horizontal tabs",
foreground = colors.gray
})

infoTab:addLabel({
x = 2,
y = 5,
text = "- Easy navigation",
foreground = colors.gray
})

infoTab:addLabel({
x = 2,
y = 6,
text = "- Content per tab",
foreground = colors.gray
})

basalt.run()

Properties

PropertyTypeDefaultDescription
activeTabnumbernilThe currently active tab ID
tabHeightnumber1Height of the tab header area
tabstable{}List of tab definitions
headerBackgroundcolorgrayBackground color for the tab header area
activeTabBackgroundcolorwhiteBackground color for the active tab
activeTabTextColorcolorblackForeground color for the active tab text
scrollableTabbooleanfalseEnables scroll mode for tabs if they exceed width
tabScrollOffsetnumber0Current scroll offset for tabs in scrollable mode

Functions

MethodReturnsDescription
TabControl:newTabtableCreates a new tab handler proxy
TabControl:setTabTabControlSets an element to belong to a specific tab
TabControl:addElementtableAdds an element to the TabControl and assigns it to the active tab
TabControl:setActiveTab-Sets the active tab
TabControl:scrollTabsTabControlScrolls the tab header left or right if scrollableTab is enabled
TabControl:setCursor-Sets the cursor position; accounts for tab header offset when delegating to parent

TabControl:newTab(title)

returns a proxy for adding elements to the tab

Parameters

  • title string The title of the tab

Returns

  • table tabHandler The tab handler proxy for adding elements to the new tab

TabControl:setTab(element, tabId)

Parameters

  • element table The element to assign to a tab
  • tabId number The ID of the tab to assign the element to

Returns

  • TabControl self For method chaining

TabControl:addElement(elementType, tabId)

Parameters

  • elementType string The type of element to add
  • tabId number Optional tab ID, defaults to active tab

Returns

  • table element The created element

TabControl:setActiveTab(tabId)

Parameters

  • tabId number The ID of the tab to activate

TabControl:scrollTabs(direction)

Scrolls the tab header left or right if scrollableTab is enabled

Parameters

  • direction number -1 to scroll left, 1 to scroll right

Returns

  • TabControl self For method chaining

TabControl:setCursor()

Released under the MIT License.