Skip to main content

UI

Types

Platform

type Platform = "Console" | "Mobile" | "PC" | "VR"

ActiveStateType

type ActiveStateType = "hover" | "floating" | "dialog"

Theme

interface Theme {
TransparencyState<number>
PrimaryState<Color3>
PrimaryTextState<Color3>
SecondaryState<Color3>
SecondaryTextState<Color3>
BorderState<Color3>
ValidState<Color3>
InvalidState<Color3>
FontSizeState<number>
FontState<Font>
FontMonoState<Font>
FontHeavyState<Font>
FontBoldState<Font>
FontSemiBoldState<Font>
FontLightState<Font>
CornerRadiusState<UDim>
CornerHalfState<UDim>
CornerDiameterState<UDim>
PaddingState<UDim>
PaddingHalfState<UDim>
PaddingDoubleState<UDim>
StrokeEnabledState<boolean>
NormalTweenState<TweenInfo>
TransparencyClampedState<number>
ScrollMidImageState<string>
ScrollTopImageState<string>
ScrollBottomImageState<string>
SoundsEnabledState<boolean>
TypingSoundsState<boolean>
TypingSoundsOnEveryTextBoxState<boolean>
VolumeState<number>
}

A directory of Flux state for UI components to use as theme variables

Properties

GuiService

UI.GuiService: GuiService

TextService

UI.TextService: TextService

UserInputService

UI.UserInputService: UserInputService

PlayerGui

UI.PlayerGui: PlayerGui

Touch

UI.Touch: boolean

Platform

UI.Platform: Platform

Hook

This item is read only and cannot be modified. Read Only
UI.Hook: Flux.Symbol

A marker for defining UI state hooks in UI.edit

Function

This item is read only and cannot be modified. Read Only
UI.Function: Flux.Symbol

A marker for defining function defaultState in UI.makeStatefulDefaults

Nil

This item is read only and cannot be modified. Read Only
UI.Nil: Flux.Symbol

A marker for defining Nil defaultState in UI.makeStatefulDefaults

TopbarInset

UI.TopbarInset: State<Rect>

GuiService.TopbarInset as a Flux state

LayerBottom

UI.LayerBottom: State<ScreenGui>

The lowermost ScreenGui for UI components

LayerDefault

UI.LayerDefault: State<ScreenGui>

The default ScreenGui for UI components

LayerTop

UI.LayerTop: State<ScreenGui>

The topmost ScreenGui for UI components

LayerTopbar

UI.LayerTopbar: State<ScreenGui>

The Topbar ScreenGui for UI components

TopbarFrame

UI.TopbarFrame: State<Frame>

A sorted Topbar Frame for UI components, parented under UI.LayerTopbar

Functions

activateState

UI.activateState(
activeStateany,
stateTypeActiveStateType
) → ()

A generalized function to handle activation/deactivation of both floating and hover states

deactivateState

UI.deactivateState(
activeStateany,
stateTypeActiveStateType
) → ()

A generalized function to deactivate both floating and hover states

toggleState

UI.toggleState(
activeStateany,
stateTypeActiveStateType
) → ()

A generalized function to toggle both floating and hover states

clearState

UI.clearState(stateTypeActiveStateType) → ()

Function to clear a specific state type

clearActiveStates

UI.clearActiveStates() → ()

Function to clear all active state types

getLuminance

UI.getLuminance(colorColor3) → number

Gets the luminance of a Color3

invertLuminance

UI.invertLuminance(
colorColor3,
amountnumber
) → Color3

Inverts the luminance of a Color3 by an amount

pointInGuiObject

UI.pointInGuiObject(
xnumber,
ynumber,
objectGuiObject
) → boolean

Checks if x, y is within the absolute bounds of the GuiObject

makeStatefulDefaults

UI.makeStatefulDefaults(
defaultType.Dict<any>,
definitionType.Dict<any>?
) → ()

Helper function for defining Flux state defaults

edit

UI.edit(
newInstance | Type.Dict<any>,
propertiesType.Dict<any>
) → Instance | Type.Dict<any>

Inherits [Flux.edit]

  • Parents children to the ._content variable of a UI component if one exists
  • Numeric indicies are defined as children with GuiObject.LayoutOrder set to the index
  • Allows UI.Hook to easily hook to default UI state or RBXScriptSignal aliases

new

UI.new(classNamestring) → UI.edit

Creates a new Instance with UI.edit

register

UI.register(
classNamestring,
classType.Dict<any>
) → ()

Registers a new UI component class

registerDefaultClasses

UI.registerDefaultClasses() → typeof(UI)

Run to register all default classes in the UI module

Show raw api
{
    "functions": [
        {
            "name": "activateState",
            "desc": "A generalized function to handle activation/deactivation of both floating and hover states",
            "params": [
                {
                    "name": "activeState",
                    "desc": "",
                    "lua_type": "any"
                },
                {
                    "name": "stateType",
                    "desc": "",
                    "lua_type": "ActiveStateType"
                }
            ],
            "returns": [],
            "function_type": "static",
            "source": {
                "line": 197,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "deactivateState",
            "desc": "A generalized function to deactivate both floating and hover states",
            "params": [
                {
                    "name": "activeState",
                    "desc": "",
                    "lua_type": "any"
                },
                {
                    "name": "stateType",
                    "desc": "",
                    "lua_type": "ActiveStateType"
                }
            ],
            "returns": [],
            "function_type": "static",
            "source": {
                "line": 216,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "toggleState",
            "desc": "A generalized function to toggle both floating and hover states",
            "params": [
                {
                    "name": "activeState",
                    "desc": "",
                    "lua_type": "any"
                },
                {
                    "name": "stateType",
                    "desc": "",
                    "lua_type": "ActiveStateType"
                }
            ],
            "returns": [],
            "function_type": "static",
            "source": {
                "line": 232,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "clearState",
            "desc": "Function to clear a specific state type",
            "params": [
                {
                    "name": "stateType",
                    "desc": "",
                    "lua_type": "ActiveStateType"
                }
            ],
            "returns": [],
            "function_type": "static",
            "source": {
                "line": 244,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "clearActiveStates",
            "desc": "Function to clear all active state types",
            "params": [],
            "returns": [],
            "function_type": "static",
            "source": {
                "line": 253,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "getLuminance",
            "desc": "Gets the luminance of a [Color3]",
            "params": [
                {
                    "name": "color",
                    "desc": "",
                    "lua_type": "Color3"
                }
            ],
            "returns": [
                {
                    "desc": "",
                    "lua_type": "number\n"
                }
            ],
            "function_type": "static",
            "source": {
                "line": 260,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "invertLuminance",
            "desc": "Inverts the luminance of a [Color3] by an amount",
            "params": [
                {
                    "name": "color",
                    "desc": "",
                    "lua_type": "Color3"
                },
                {
                    "name": "amount",
                    "desc": "",
                    "lua_type": "number"
                }
            ],
            "returns": [
                {
                    "desc": "",
                    "lua_type": "Color3\n"
                }
            ],
            "function_type": "static",
            "source": {
                "line": 265,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "pointInGuiObject",
            "desc": "Checks if x, y is within the absolute bounds of the GuiObject",
            "params": [
                {
                    "name": "x",
                    "desc": "",
                    "lua_type": "number"
                },
                {
                    "name": "y",
                    "desc": "",
                    "lua_type": "number"
                },
                {
                    "name": "object",
                    "desc": "",
                    "lua_type": "GuiObject"
                }
            ],
            "returns": [
                {
                    "desc": "",
                    "lua_type": "boolean\n"
                }
            ],
            "function_type": "static",
            "source": {
                "line": 284,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "makeStatefulDefaults",
            "desc": "Helper function for defining Flux state defaults",
            "params": [
                {
                    "name": "default",
                    "desc": "",
                    "lua_type": "Type.Dict<any>"
                },
                {
                    "name": "definition",
                    "desc": "",
                    "lua_type": "Type.Dict<any>?"
                }
            ],
            "returns": [],
            "function_type": "static",
            "source": {
                "line": 303,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "edit",
            "desc": "Inherits [Flux.edit]\n* Parents children to the ._content variable of a UI component if one exists\n* Numeric indicies are defined as children with [GuiObject.LayoutOrder] set to the index\n* Allows UI.Hook to easily hook to default UI state or [RBXScriptSignal] aliases",
            "params": [
                {
                    "name": "new",
                    "desc": "",
                    "lua_type": "Instance | Type.Dict<any>"
                },
                {
                    "name": "properties",
                    "desc": "",
                    "lua_type": "Type.Dict<any>"
                }
            ],
            "returns": [
                {
                    "desc": "",
                    "lua_type": "Instance | Type.Dict<any>\n"
                }
            ],
            "function_type": "static",
            "source": {
                "line": 327,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "new",
            "desc": "Creates a new Instance with [UI.edit]",
            "params": [
                {
                    "name": "className",
                    "desc": "",
                    "lua_type": "string"
                }
            ],
            "returns": [
                {
                    "desc": "",
                    "lua_type": "UI.edit"
                }
            ],
            "function_type": "static",
            "source": {
                "line": 426,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "register",
            "desc": "Registers a new UI component class",
            "params": [
                {
                    "name": "className",
                    "desc": "",
                    "lua_type": "string"
                },
                {
                    "name": "class",
                    "desc": "",
                    "lua_type": "Type.Dict<any>"
                }
            ],
            "returns": [],
            "function_type": "static",
            "source": {
                "line": 431,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "registerDefaultClasses",
            "desc": "Run to register all default classes in the UI module",
            "params": [],
            "returns": [
                {
                    "desc": "",
                    "lua_type": "typeof(UI)\n"
                }
            ],
            "function_type": "static",
            "source": {
                "line": 439,
                "path": "src/Client/UI/init.luau"
            }
        }
    ],
    "properties": [
        {
            "name": "GuiService",
            "desc": "",
            "lua_type": "GuiService",
            "source": {
                "line": 41,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "TextService",
            "desc": "",
            "lua_type": "TextService",
            "source": {
                "line": 45,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "UserInputService",
            "desc": "",
            "lua_type": "UserInputService",
            "source": {
                "line": 49,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "PlayerGui",
            "desc": "",
            "lua_type": "PlayerGui",
            "source": {
                "line": 53,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "Touch",
            "desc": "",
            "lua_type": "boolean",
            "source": {
                "line": 61,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "Platform",
            "desc": "",
            "lua_type": "Platform",
            "source": {
                "line": 67,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "Hook",
            "desc": "A marker for defining UI state hooks in [UI.edit]",
            "lua_type": "Flux.Symbol",
            "readonly": true,
            "source": {
                "line": 77,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "Function",
            "desc": "A marker for defining function defaultState in [UI.makeStatefulDefaults]",
            "lua_type": "Flux.Symbol",
            "readonly": true,
            "source": {
                "line": 83,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "Nil",
            "desc": "A marker for defining Nil defaultState in [UI.makeStatefulDefaults]",
            "lua_type": "Flux.Symbol",
            "readonly": true,
            "source": {
                "line": 89,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "TopbarInset",
            "desc": "GuiService.TopbarInset as a Flux state",
            "lua_type": "State<Rect>",
            "source": {
                "line": 94,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "LayerBottom",
            "desc": "The lowermost ScreenGui for UI components",
            "lua_type": "State<ScreenGui>",
            "source": {
                "line": 102,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "LayerDefault",
            "desc": "The default ScreenGui for UI components",
            "lua_type": "State<ScreenGui>",
            "source": {
                "line": 114,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "LayerTop",
            "desc": "The topmost ScreenGui for UI components",
            "lua_type": "State<ScreenGui>",
            "source": {
                "line": 127,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "LayerTopbar",
            "desc": "The Topbar ScreenGui for UI components",
            "lua_type": "State<ScreenGui>",
            "source": {
                "line": 153,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "TopbarFrame",
            "desc": "A sorted Topbar Frame for UI components, parented under [UI.LayerTopbar]",
            "lua_type": "State<Frame>",
            "source": {
                "line": 166,
                "path": "src/Client/UI/init.luau"
            }
        }
    ],
    "types": [
        {
            "name": "Platform",
            "desc": "",
            "lua_type": "\"Console\" | \"Mobile\" | \"PC\" | \"VR\"",
            "source": {
                "line": 57,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "ActiveStateType",
            "desc": "",
            "lua_type": "\"hover\" | \"floating\" | \"dialog\"",
            "source": {
                "line": 192,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "Theme",
            "desc": "A directory of Flux state for UI components to use as theme variables",
            "fields": [
                {
                    "name": "Transparency",
                    "lua_type": "State<number>",
                    "desc": ""
                },
                {
                    "name": "Primary",
                    "lua_type": "State<Color3>",
                    "desc": ""
                },
                {
                    "name": "PrimaryText",
                    "lua_type": "State<Color3>",
                    "desc": ""
                },
                {
                    "name": "Secondary",
                    "lua_type": "State<Color3>",
                    "desc": ""
                },
                {
                    "name": "SecondaryText",
                    "lua_type": "State<Color3>",
                    "desc": ""
                },
                {
                    "name": "Border",
                    "lua_type": "State<Color3>",
                    "desc": ""
                },
                {
                    "name": "Valid",
                    "lua_type": "State<Color3>",
                    "desc": ""
                },
                {
                    "name": "Invalid",
                    "lua_type": "State<Color3>",
                    "desc": ""
                },
                {
                    "name": "FontSize",
                    "lua_type": "State<number>",
                    "desc": ""
                },
                {
                    "name": "Font",
                    "lua_type": "State<Font>",
                    "desc": ""
                },
                {
                    "name": "FontMono",
                    "lua_type": "State<Font>",
                    "desc": ""
                },
                {
                    "name": "FontHeavy",
                    "lua_type": "State<Font>",
                    "desc": ""
                },
                {
                    "name": "FontBold",
                    "lua_type": "State<Font>",
                    "desc": ""
                },
                {
                    "name": "FontSemiBold",
                    "lua_type": "State<Font>",
                    "desc": ""
                },
                {
                    "name": "FontLight",
                    "lua_type": "State<Font>",
                    "desc": ""
                },
                {
                    "name": "CornerRadius",
                    "lua_type": "State<UDim>",
                    "desc": ""
                },
                {
                    "name": "CornerHalf",
                    "lua_type": "State<UDim>",
                    "desc": ""
                },
                {
                    "name": "CornerDiameter",
                    "lua_type": "State<UDim>",
                    "desc": ""
                },
                {
                    "name": "Padding",
                    "lua_type": "State<UDim>",
                    "desc": ""
                },
                {
                    "name": "PaddingHalf",
                    "lua_type": "State<UDim>",
                    "desc": ""
                },
                {
                    "name": "PaddingDouble",
                    "lua_type": "State<UDim>",
                    "desc": ""
                },
                {
                    "name": "StrokeEnabled",
                    "lua_type": "State<boolean>",
                    "desc": ""
                },
                {
                    "name": "NormalTween",
                    "lua_type": "State<TweenInfo>",
                    "desc": ""
                },
                {
                    "name": "TransparencyClamped",
                    "lua_type": "State<number>",
                    "desc": ""
                },
                {
                    "name": "ScrollMidImage",
                    "lua_type": "State<string>",
                    "desc": ""
                },
                {
                    "name": "ScrollTopImage",
                    "lua_type": "State<string>",
                    "desc": ""
                },
                {
                    "name": "ScrollBottomImage",
                    "lua_type": "State<string>",
                    "desc": ""
                },
                {
                    "name": "SoundsEnabled",
                    "lua_type": "State<boolean>",
                    "desc": ""
                },
                {
                    "name": "TypingSounds",
                    "lua_type": "State<boolean>",
                    "desc": ""
                },
                {
                    "name": "TypingSoundsOnEveryTextBox",
                    "lua_type": "State<boolean>",
                    "desc": ""
                },
                {
                    "name": "Volume",
                    "lua_type": "State<number>",
                    "desc": ""
                }
            ],
            "source": {
                "line": 44,
                "path": "src/Client/UI/Theme/init.luau"
            }
        }
    ],
    "name": "UI",
    "desc": "",
    "source": {
        "line": 14,
        "path": "src/Client/UI/init.luau"
    }
}