API Reference › appui-react› ContentView › SplitPaneProps

SplitPaneProps Interface

Props for SplitPane component

Properties

Name Type Description
allowResize boolean | undefined Pass false to disable resizing  
children React.ReactNode[] The array of two react nodes, one for each pane.  
className string | undefined Class name to be added to the SplitPane div  
defaultSize string | number Default initial size of primary pane  
maxSize string | number You can limit the maximal size of the 'fixed' pane using the maxSize parameter with a positive value  
minSize string | number    
onChange (newSize: number) => void | undefined Callback is invoked with the current drag during a drag event.  
onDragFinished (newSize: number) => void | undefined This callback is invoked when a drag ends.  
onDragStarted () => void | undefined This callback is invoked when a drag start.  
onResizerClick (event: MouseEvent) => void | undefined Callback is invoked if user clicks on Resizer.  
onResizerDoubleClick (event: MouseEvent) => void | undefined Callback is invoked if user double clicks on Resizer.  
pane1ClassName string | undefined Class name to be added to Pane1's div  
pane1Style React.CSSProperties | undefined Styling to be applied to the first pane, with precedence over paneStyle  
pane2ClassName string | undefined Class name to be added to Pane2's div  
pane2Style React.CSSProperties | undefined Styling to be applied to the second pane, with precedence over paneStyle  
paneClassName string | undefined Class name to be added to each Pane's div  
paneStyle React.CSSProperties | undefined Styling to be applied to both panes  
primary "first" | "second" Determines which pane maintains its size when browser window is resized.  
resizerStyle React.CSSProperties | undefined Styling to be applied to the resizer bar  
size string | number Size of primary pane  
split "horizontal" | "vertical"    
step number | undefined You can use the step prop to only allow resizing in fixed increments.  
style React.CSSProperties | undefined Styling to be applied to the main container  

Defined in

Last Updated: 23 May, 2024