Basalt2/docs/references/elements/Accordion.md

Accordion

The Accordion is a container that provides collapsible panel functionality

Extends: Container

Examples (Executable)

local basalt = require("basalt")

local main = basalt.getMainFrame()

-- Create an Accordion
local accordion = main:addAccordion({
x = 2,
y = 2,
width = 30,
height = 15,
allowMultiple = true, -- Only one panel open at a time
headerBackground = colors.gray,
headerTextColor = colors.white,
expandedHeaderBackground = colors.lightBlue,
expandedHeaderTextColor = colors.white,
})

-- Panel 1: Info
local infoPanel = accordion:newPanel("Information", true) -- starts expanded
infoPanel:addLabel({
x = 2,
y = 1,
text = "This is an accordion",
foreground = colors.yellow
})
infoPanel:addLabel({
x = 2,
y = 2,
text = "with collapsible panels.",
foreground = colors.white
})

-- Panel 2: Settings
local settingsPanel = accordion:newPanel("Settings", false)
settingsPanel:addLabel({
x = 2,
y = 1,
text = "Volume:",
foreground = colors.white
})
local volumeSlider = settingsPanel:addSlider({
x = 10,
y = 1,
width = 15,
value = 50
})
settingsPanel:addLabel({
x = 2,
y = 3,
text = "Auto-save:",
foreground = colors.white
})
settingsPanel:addSwitch({
x = 13,
y = 3,
})

-- Panel 3: Actions
local actionsPanel = accordion:newPanel("Actions", false)
local statusLabel = actionsPanel:addLabel({
x = 2,
y = 4,
text = "Ready",
foreground = colors.lime
})

actionsPanel:addButton({
x = 2,
y = 1,
width = 10,
height = 1,
text = "Save",
background = colors.green,
foreground = colors.white,
})

actionsPanel:addButton({
x = 14,
y = 1,
width = 10,
height = 1,
text = "Cancel",
background = colors.red,
foreground = colors.white,
})

-- Panel 4: About
local aboutPanel = accordion:newPanel("About", false)
aboutPanel:addLabel({
x = 2,
y = 1,
text = "Basalt Accordion v1.0",
foreground = colors.white
})
aboutPanel:addLabel({
x = 2,
y = 2,
text = "A collapsible panel",
foreground = colors.gray
})
aboutPanel:addLabel({
x = 2,
y = 3,
text = "component for UI.",
foreground = colors.gray
})

-- Instructions
main:addLabel({
x = 2,
y = 18,
text = "Click panel headers to expand/collapse",
foreground = colors.lightGray
})

basalt.run()

Properties

Property	Type	Default	Description
panels	table	{}	List of panel definitions
panelHeaderHeight	number	1	Height of each panel header
allowMultiple	boolean	false	Allow multiple panels to be open at once
headerBackground	color	gray	Background color for panel headers
headerTextColor	color	white	Text color for panel headers
expandedHeaderBackground	color	lightGray	Background color for expanded panel headers
expandedHeaderTextColor	color	black	Text color for expanded panel headers

Functions

Method	Returns	Description
Accordion:newPanel	table	Creates a new accordion panel
Accordion:togglePanel	Accordion	Toggles a panel's expanded state
Accordion:expandPanel	Accordion	Expands a specific panel
Accordion:collapsePanel	Accordion	Collapses a specific panel
Accordion:getPanel	container	Gets a panel container by ID

Accordion:newPanel(title, expanded)

Creates a new panel and returns the panel's container

Parameters

• title string The title of the panel
• expanded boolean Whether the panel starts expanded (default: false)

Returns

• table panelContainer The container for this panel

Accordion:togglePanel(panelId)

Parameters

• panelId number The ID of the panel to toggle

Returns

• Accordion self For method chaining

Accordion:expandPanel(panelId)

Parameters

• panelId number The ID of the panel to expand

Returns

• Accordion self For method chaining

Accordion:collapsePanel(panelId)

Parameters

• panelId number The ID of the panel to collapse

Returns

• Accordion self For method chaining

Accordion:getPanel(panelId)

Parameters

• panelId number The ID of the panel

Returns

• container The panel's container or nil