ComponentsSplitter
Splitter
The Splitter is a flexible and dynamic component that allows division of the screen or a section into multiple resizable areas.
The Splitter is a flexible and dynamic component that allows division of the screen or a section into multiple resizable areas.
API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.
PanelSizeData[]
'ltr' | 'rtl'
The document's text/writing direction.
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
string
The unique identifier of the machine.
Partial<{ root: string resizeTrigger(id: string): string label(id: string): string panel(id: string | number): string }>
The ids of the elements in the splitter. Useful for composition.
(details: SizeChangeDetails) => void
Function called when the splitter is resized.
(details: SizeChangeDetails) => void
Function called when the splitter resize ends.
(details: SizeChangeDetails) => void
Function called when the splitter resize starts.
'horizontal' | 'vertical'
The orientation of the splitter. Can be `horizontal` or `vertical`
PanelSizeData[]
The size data of the panels
(props: PanelProps) => Dict<any>
(props: ResizeTriggerProps) => Dict<any>
(props: ResizeTriggerProps) => ResizeTriggerState
Returns the state details for a resize trigger.
boolean
Whether the splitter is being dragged.
boolean
Whether the splitter is focused.
Dict<any>
(id: PanelId, size: number) => void
Function to set the size of a panel.
(id: PanelId) => void
Function to set a panel to its maximum size.
(id: PanelId) => void
Function to set a panel to its minimum size.
PanelBounds
The bounds of the currently dragged splitter handle.
PanelId
number
type ONLY_FOR_FORMAT = | `${string}:${string}` | `${string}:${number}` | `${number}:${string}` | `${number}:${number}`
boolean
number