SYNQ UI
Tabs & Groups
Organize your UI with tabs and collapsible groups
Organize your UI content into tabs and groups for better structure and navigation.
Creating Tabs
Tabs are the main way to organize different sections of your UI:
ui:Tab(name)
Examples
local Unlocker, synq, example = ...
local ui, settings, cmd = synq.UI:New("example", {...})
-- Create a tab and store it in a local variable for cleaner code
local rotation = ui:Tab("Rotation")
rotation:Checkbox({
text = "Enable Burst Mode",
var = "burstMode",
default = false
})
-- Create a tab with embedded spell texture icon in the tab name
local petTab = ui:Tab("Pet " .. synq.textureEscape(136, 12, "0:2")) -- Mend Pet icon
petTab:Slider({
text = "Pet Heal Threshold",
var = "petHealHP",
min = 0,
max = 100,
default = 40,
valueType = "%"
})
You can store tabs in local variables for cleaner code, or access them directly via ui.tabs["Tab Name"].
Groups
Create expandable/collapsible folders containing groups of tabs. This is perfect for organizing multiple specializations or categories:
ui:Group(options)
Example
local gold = {255, 215, 0, 1}
local amber = {255, 191, 0, 1}
local hunterGroup = ui:Group({
name = "Hunter",
title = {"synq", "hunter"},
colors = {
title = {gold, amber},
accent = amber,
}
})
local control = hunterGroup:Tab("Control " .. synq.textureEscape(19577, 12)) -- Intimidation icon
local defense = hunterGroup:Tab("Defense " .. synq.textureEscape(109304, 12)) -- Exhilaration icon
Groups allow you to:
- Organize related tabs together
- Use custom colors per group
- Create a cleaner, more organized interface
- Collapse/expand entire sections
Next: Learn about all available UI Elements.