Skip to main content

Splitter

A container frame similar to a Background but split into two panels, with a draggable control for resizing the panels within the container. Resizing one section to be larger will reduce the size of the other section, and vice versa. This is useful for letting users resize content.

Dark Light
Dark Light

This is a controlled component. The current split location should be passed as a number between 0 and 1 to the Alpha prop, and a callback should be passed to the OnChanged prop, which is run with the new alpha value when the user uses the splitter.

You can also optionally provide MinAlpha and MaxAlpha props (numbers between 0 and 1) which limit the resizing. These values default to 0.1 and 0.9.

To render children in each side, use the children parameters in createElement and provide the keys Side0 and Side1. For a complete example: 

local function MyComponent()
	local division, setDivision = React.useState(0.5)
	return React.createElement(StudioComponents.Splitter, {
		Alpha = division,
		OnChanged = setDivision,
	}, {
		Side0 = React.createElement(...),
		Side1 = React.createElement(...),
	})
end

By default, the split is horizontal, which means that the frame is split into a left and right side. This can be changed, for example to a vertical split (top and bottom), by providing an Enum.FillDirection value to the FillDirection prop.

This component can use your system's splitter mouse icons when interacting with the splitter bar. To enable this behavior, ensure you have rendered a PluginProvider somewhere higher up in the tree.

Types​

Props​

Component Props
</>
interface Props {
Alpha: number
OnChanged: ((newAlpha: number) → ())?
FillDirection: Enum.FillDirection?
MinAlpha: number?
MaxAlpha: number?
children: {
Side0: React.ReactNode?,
Side1: React.ReactNode?
}?
}
Show raw api
{
    "functions": [],
    "properties": [],
    "types": [
        {
            "name": "Props",
            "desc": "",
            "fields": [
                {
                    "name": "...",
                    "lua_type": "CommonProps",
                    "desc": ""
                },
                {
                    "name": "Alpha",
                    "lua_type": "number",
                    "desc": ""
                },
                {
                    "name": "OnChanged",
                    "lua_type": "((newAlpha: number) -> ())?",
                    "desc": ""
                },
                {
                    "name": "FillDirection",
                    "lua_type": "Enum.FillDirection?",
                    "desc": ""
                },
                {
                    "name": "MinAlpha",
                    "lua_type": "number?",
                    "desc": ""
                },
                {
                    "name": "MaxAlpha",
                    "lua_type": "number?",
                    "desc": ""
                },
                {
                    "name": "children",
                    "lua_type": "{ Side0: React.ReactNode?, Side1: React.ReactNode? }?",
                    "desc": ""
                }
            ],
            "tags": [
                "Component Props"
            ],
            "source": {
                "line": 79,
                "path": "src/Components/Splitter.luau"
            }
        }
    ],
    "name": "Splitter",
    "desc": "A container frame similar to a [Background] but split into two panels, with a draggable control \nfor\tresizing the panels within the container. Resizing one section to be larger will reduce the\nsize of the other section, and vice versa. This is useful for letting users resize content.\n\n| Dark | Light |\n| - | - |\n| ![Dark](/StudioComponents/components/splitter/dark.png) | ![Light](/StudioComponents/components/splitter/light.png) |\n\nThis is a controlled component. The current split location should be passed as a number between\n0 and 1 to the `Alpha` prop, and a callback should be passed to the `OnChanged` prop, which\nis run with the new alpha value when the user uses the splitter. \n\nYou can also optionally provide `MinAlpha` and `MaxAlpha` props (numbers between 0 and 1) which\nlimit the resizing. These values default to 0.1 and 0.9.\n\nTo render children in each side, use the `children` parameters in createElement and provide the \nkeys `Side0` and `Side1`. For a complete example:\n\n```lua\nlocal function MyComponent()\n\tlocal division, setDivision = React.useState(0.5)\n\treturn React.createElement(StudioComponents.Splitter, {\n\t\tAlpha = division,\n\t\tOnChanged = setDivision,\n\t}, {\n\t\tSide0 = React.createElement(...),\n\t\tSide1 = React.createElement(...),\n\t})\nend\n```\n\nBy default, the split is horizontal, which means that the frame is split into a left and right\nside. This can be changed, for example to a vertical split (top and bottom), by providing an \n[Enum.FillDirection] value to the `FillDirection` prop.\n\nThis component can use your system's splitter mouse icons when interacting with the splitter bar. \nTo enable this behavior, ensure you have rendered a [PluginProvider] somewhere higher up in \nthe tree.",
    "source": {
        "line": 43,
        "path": "src/Components/Splitter.luau"
    }
}