Getting started

Import the module

You can find the module in releases. Put the module wherever you like inside of the plugin.

local ui = require(StudioWidgets)

Set the plugin

Before we are able to use any other functions, we have to set the plugin first.

local ui = require(StudioWidgets)

ui:SetPlugin(plugin)

Create a window

Before we can add any GUI components, we need a window to place them in. You may configure the window however you like.

local ui = require(StudioWidgets)

ui:SetPlugin(plugin)

local window = ui:Window(
    "StudioWidgets Example",
    {
        width = 200,
        height = 300
    }
)

Create sections

The main component you will use is called a TitledSection. You will create these using window:TitledSection().

local ui = require(StudioWidgets)

ui:SetPlugin(plugin)

local window = ui:Window(
    "StudioWidgets Example",
    {
        width = 200,
        height = 300
    }
)

local optionsSection = window:TitledSection("Options")

Section components

What use would a section without anything in it be? That's where section components come in. I'll be showing some examples of these and how to use them.

local ui = require(StudioWidgets)

ui:SetPlugin(plugin)

local window = ui:Window(
    "StudioWidgets Example",
    {
        width = 200,
        height = 300
    }
)

local optionsSection = window:TitledSection("Options")

-- true is the default value of the checkbox, making it checked by default.
local testCheckbox = optionsSection:Checkbox("Click me!", true, function(checked)
    -- The callback function runs with a boolean argument "checked" when the checkbox is clicked.
    if checked then
        print("Checkbox is checked")
    else
        print("Checkbox is not checked")
    end
end)