Skip to main content

UI

Types​

Theme​

</>
interface Theme {
Transparency: State<number>
Primary: State<Color3>
PrimaryText: State<Color3>
Secondary: State<Color3>
SecondaryText: State<Color3>
Border: State<Color3>
Valid: State<Color3>
Invalid: State<Color3>
FontSize: State<number>
Font: State<Font>
FontMono: State<Font>
FontHeavy: State<Font>
FontBold: State<Font>
FontSemiBold: State<Font>
FontLight: State<Font>
CornerRadius: State<UDim>
CornerHalf: State<UDim>
CornerDiameter: State<UDim>
Padding: State<UDim>
PaddingHalf: State<UDim>
PaddingDouble: State<UDim>
StrokeEnabled: State<boolean>
NormalTween: State<TweenInfo>
TransparencyClamped: State<number>
ScrollMidImage: State<string>
ScrollTopImage: State<string>
ScrollBottomImage: State<string>
SoundsEnabled: State<boolean>
TypingSounds: State<boolean>
TypingSoundsOnEveryTextBox: State<boolean>
Volume: State<number>
}

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

Platform​

</>
type Platform = "Console" | "Mobile" | "PC" | "VR"

ActiveStateType​

</>
type ActiveStateType = "hover" | "floating" | "dialog"

Properties​

GuiService​

</>
UI.GuiService: GuiService

TextService​

</>
UI.TextService: TextService

UserInputService​

</>
UI.UserInputService: UserInputService

LocalPlayer​

</>
UI.LocalPlayer: Player

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(
activeState: any,
stateType: ActiveStateType
) → ()

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

deactivateState​

</>
UI.deactivateState(
activeState: any,
stateType: ActiveStateType
) → ()

A generalized function to deactivate both floating and hover states

toggleState​

</>
UI.toggleState(
activeState: any,
stateType: ActiveStateType
) → ()

A generalized function to toggle both floating and hover states

clearState​

</>
UI.clearState(stateType: ActiveStateType) → ()

Function to clear a specific state type

clearActiveStates​

</>
UI.clearActiveStates() → ()

Function to clear all active state types

getLuminance​

</>
UI.getLuminance(color: Color3) → number

Gets the luminance of a Color3

invertLuminance​

</>
UI.invertLuminance(
color: Color3,
amount: number
) → Color3

Inverts the luminance of a Color3 by an amount

pointInGuiObject​

</>
UI.pointInGuiObject(
x: number,
y: number,
object: GuiObject
) → boolean

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

makeStatefulDefaults​

</>
UI.makeStatefulDefaults(
default: Type.Dict<any>,
definition: Type.Dict<any>?
) → ()

Helper function for defining Flux state defaults

edit​

</>
UI.edit(
new: Instance | Type.Dict<any>,
properties: Type.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(className: string) → UI.edit

Creates a new Instance with UI.edit

register​

</>
UI.register(
className: string,
class: Type.Dict<any>
) → ()

Registers a new UI component class

registerClasses​

</>
UI.registerClasses() → typeof(UI)

Run to register the default classes for 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": 244,
                "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": 263,
                "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": 279,
                "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": 291,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "clearActiveStates",
            "desc": "Function to clear all active state types",
            "params": [],
            "returns": [],
            "function_type": "static",
            "source": {
                "line": 300,
                "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": 307,
                "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": 312,
                "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": 331,
                "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": 361,
                "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": 419,
                "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": 550,
                "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": 555,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "registerClasses",
            "desc": "Run to register the default classes for the UI module",
            "params": [],
            "returns": [
                {
                    "desc": "",
                    "lua_type": "typeof(UI)\n"
                }
            ],
            "function_type": "static",
            "source": {
                "line": 563,
                "path": "src/Client/UI/init.luau"
            }
        }
    ],
    "properties": [
        {
            "name": "GuiService",
            "desc": "",
            "lua_type": "GuiService",
            "source": {
                "line": 79,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "TextService",
            "desc": "",
            "lua_type": "TextService",
            "source": {
                "line": 83,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "UserInputService",
            "desc": "",
            "lua_type": "UserInputService",
            "source": {
                "line": 87,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "LocalPlayer",
            "desc": "",
            "lua_type": "Player",
            "source": {
                "line": 91,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "PlayerGui",
            "desc": "",
            "lua_type": "PlayerGui",
            "source": {
                "line": 95,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "Touch",
            "desc": "",
            "lua_type": "boolean",
            "source": {
                "line": 103,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "Platform",
            "desc": "",
            "lua_type": "Platform",
            "source": {
                "line": 109,
                "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": 119,
                "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": 125,
                "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": 131,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "TopbarInset",
            "desc": "GuiService.TopbarInset as a Flux state",
            "lua_type": "State<Rect>",
            "source": {
                "line": 136,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "LayerBottom",
            "desc": "The lowermost ScreenGui for UI components",
            "lua_type": "State<ScreenGui>",
            "source": {
                "line": 144,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "LayerDefault",
            "desc": "The default ScreenGui for UI components",
            "lua_type": "State<ScreenGui>",
            "source": {
                "line": 156,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "LayerTop",
            "desc": "The topmost ScreenGui for UI components",
            "lua_type": "State<ScreenGui>",
            "source": {
                "line": 169,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "LayerTopbar",
            "desc": "The Topbar ScreenGui for UI components",
            "lua_type": "State<ScreenGui>",
            "source": {
                "line": 195,
                "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": 208,
                "path": "src/Client/UI/init.luau"
            }
        }
    ],
    "types": [
        {
            "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": "Platform",
            "desc": "",
            "lua_type": "\"Console\" | \"Mobile\" | \"PC\" | \"VR\"",
            "source": {
                "line": 99,
                "path": "src/Client/UI/init.luau"
            }
        },
        {
            "name": "ActiveStateType",
            "desc": "",
            "lua_type": "\"hover\" | \"floating\" | \"dialog\"",
            "source": {
                "line": 239,
                "path": "src/Client/UI/init.luau"
            }
        }
    ],
    "name": "UI",
    "desc": "",
    "source": {
        "line": 17,
        "path": "src/Client/UI/init.luau"
    }
}