Skip to content

UI Controls

Jump to bottom
donniedice edited this page May 1, 2026 · 4 revisions

UI Controls & Options Panel

The UI module (RGXUI) provides widget factories for common interface controls and a full options panel builder with tab system and scroll container.

Widget Factories

UI:CreateSlider(parent, opts) → table

Create a horizontal slider control.

Parameters:

Parameter Type Required Default Description
parent Frame Yes — Parent frame
opts.label string Yes — Label text above slider
opts.min number Yes — Minimum value
opts.max number Yes — Maximum value
opts.step number No 1 Step increment
opts.value number Yes — Initial value
opts.onChange function No — onChange(value) callback
opts.width number No 200 Slider track width
opts.format string No "%.0f" Value display format

Returns: { frame, slider, label, valueText }

local slider = UI:CreateSlider(parent, {
    label = "Font Size",
    min = 8,
    max = 24,
    step = 1,
    value = 12,
    onChange = function(val)
    myFontString:SetFont(myFont, val, "")
    end,
})
slider.frame:SetPoint("TOPLEFT", 10, -10)

UI:CreateToggle(parent, opts) → table

Create a checkbox toggle control.

Parameters:

Parameter Type Required Default Description
parent Frame Yes — Parent frame
opts.label string Yes — Label text beside checkbox
opts.value bool Yes — Initial checked state
opts.onChange function No — onChange(checked) callback
opts.width number No auto Label width

Returns: { frame, checkbox, label }

local toggle = UI:CreateToggle(parent, {
    label = "Enable Notifications",
    value = true,
    onChange = function(checked)
    MyAddonDB.profile.notifications = checked
    end,
})

UI:CreateLabel(parent, opts) → FontString

Create a styled label.

Parameters:

Parameter Type Required Default Description
parent Frame Yes — Parent frame
opts.text string Yes — Label text
opts.font string No default Font name
opts.size number No 12 Font size
opts.flags string No "" Font flags
opts.color table No {1,1,1,1} Font color
opts.justifyH string No "LEFT" Horizontal justify 
local label = UI:CreateLabel(parent, {
    text = "Configuration",
    font = "Inter-Bold",
    size = 14,
    color = {1, 0.9, 0.2, 1},
})

UI:CreateColorPicker(parent, opts) → table

Create a color swatch control that opens the ColorPicker on click.

Parameters:

Parameter Type Required Default Description
parent Frame Yes — Parent frame
opts.label string No — Label text
opts.value table No {1,1,1,1} Initial color {r,g,b,a}
opts.onChange function No — onChange(r, g, b, a) callback

Returns: { frame, swatch, label }

local cp = UI:CreateColorPicker(parent, {
    label = "Background Color",
    value = {0.1, 0.1, 0.2, 1.0},
    onChange = function(r, g, b, a)
    myFrame:SetBackdropColor(r, g, b, a)
    end,
})

UI:CreateColorSettingControl(parent, opts) → table

Color swatch + label bound to a saved variable. Changes write directly to storage[key].

Parameters:

Parameter Type Required Description
parent Frame Yes Parent frame
opts.label string Yes Label text
opts.storage table Yes Saved variable table
opts.key string Yes Key within storage
opts.onChange function No Additional change callback 
local ctrl = UI:CreateColorSettingControl(parent, {
    label = "Bar Color",
    storage = MyAddonDB.profile,
    key = "barColor",
})

UI:CreateStatusBarDropdown(parent, opts) → table

Statusbar texture selection dropdown. Delegates to the Textures module.

Parameters:

Parameter Type Required Description
parent Frame Yes Parent frame
opts.label string No Label text
opts.value string No Initial statusbar name
opts.onChange function No onChange(barName) callback

UI:CreateFontDropdown(parent, opts) → table

Font family selection dropdown. Delegates to the Fonts module.

Parameters:

Parameter Type Required Description
parent Frame Yes Parent frame
opts.label string No Label text
opts.value string No Initial font name
opts.onChange function No onChange(fontName) callback

UI:CreateFontSettingControl(parent, opts) → table

Font dropdown + reset button bound to storage[key]. Delegates to the Fonts module.

Parameters:

Parameter Type Required Description
parent Frame Yes Parent frame
opts.label string Yes Label text
opts.storage table Yes Saved variable table
opts.key string Yes Key within storage
opts.onChange function No Additional change callback

Options Panel Builder

UI:CreateOptionsPanel(name, opts) → panel

Create a full options panel with tab system, scroll container, and header.

Parameters:

Parameter Type Required Default Description
name string Yes — Panel name (used as frame name)
opts.title string No name Title text in header
opts.subtitle string No "" Subtitle text
opts.width number No 800 Panel width
opts.height number No 600 Panel height
opts.version string No — Version string shown in header
opts.author string No — Author string shown in header
opts.website string No — Website URL shown in header

Returns: Panel object with methods below.

Panel Methods

panel:AddTab(name, buildFn)

Add a tab to the panel. buildFn(container) is called once when the tab is first shown.

panel:AddTab("General", function(container)
    UI:CreateToggle(container, { label = "Enabled", value = true })
    UI:CreateSlider(container, { label = "Scale", min = 0.5, max = 2.0, step = 0.1, value = 1.0 })
end)

panel:AddTab("Fonts", function(container)
    UI:CreateFontDropdown(container, { label = "Header Font" })
    UI:CreateFontDropdown(container, { label = "Body Font" })
end)

panel:AddTab("Colors", function(container)
    UI:CreateColorPicker(container, { label = "Primary Color" })
end)

panel:Open()

Open the panel and navigate to it in Interface Options:

panel:Open()

panel:SelectTab(index)

Switch to a tab by 1-based index:

panel:SelectTab(2) -- switch to Fonts tab

panel:SelectTabByName(name)

Switch to a tab by its name:

panel:SelectTabByName("Fonts")

panel:InvalidateAllTabs()

Mark all tabs for rebuild. Next time each tab is shown, its buildFn will be re-executed:

panel:InvalidateAllTabs()

panel:Refresh()

Force-refresh the currently visible tab:

panel:Refresh()

Complete Options Panel Example

local UI = RGX:GetUI()

local panel = UI:CreateOptionsPanel("MyAddonOptions", {
    title = "My Addon",
    subtitle = "v1.0.0 by Me",
    width = 800,
    height = 600,
})

panel:AddTab("General", function(container)
    UI:CreateToggle(container, {
        label = "Enable Addon",
        value = MyAddonDB.profile.enabled,
        onChange = function(v) MyAddonDB.profile.enabled = v end,
    })
    UI:CreateSlider(container, {
        label = "Update Interval",
        min = 0.1,
        max = 5.0,
        step = 0.1,
        value = MyAddonDB.profile.interval,
        onChange = function(v) MyAddonDB.profile.interval = v end,
    })
end)

panel:AddTab("Appearance", function(container)
    UI:CreateFontDropdown(container, {
        label = "Font Family",
        value = MyAddonDB.profile.fontFamily,
        onChange = function(v) MyAddonDB.profile.fontFamily = v end,
    })
    UI:CreateSlider(container, {
        label = "Font Size",
        min = 8,
        max = 24,
        step = 1,
        value = MyAddonDB.profile.fontSize,
        onChange = function(v) MyAddonDB.profile.fontSize = v end,
    })
    UI:CreateColorPicker(container, {
        label = "Text Color",
        value = MyAddonDB.profile.textColor,
        onChange = function(r, g, b, a)
        MyAddonDB.profile.textColor = {r, g, b, a}
        end,
    })
    UI:CreateStatusBarDropdown(container, {
        label = "Bar Texture",
        value = MyAddonDB.profile.barTexture,
        onChange = function(v) MyAddonDB.profile.barTexture = v end,
    })
end)

-- Register with WoW
InterfaceOptions_AddCategory(panel.frame)

-- Open from slash command
SLASH_MYADDON1 = "/myaddon"
SlashCmdList.MYADDON = function()
    panel:Open()
end

Layout Notes

  • Controls are positioned automatically within the scroll container
  • Each control is anchored below the previous one
  • Use container (the scroll child) as the parent for all controls
  • The scroll container handles overflow automatically
  • Tab content is built lazily on first show and cached unless invalidated

RGX-Framework

Home

Getting Started

Modules

Reference

Tooling

Project

Clone this wiki locally