Split Pane

A flexible and customizable component for creating split views in your application.

Usage

The SplitPane component is designed for creating adjustable split layouts, either vertically or horizontally.

Basic Usage

A simple vertical split pane layout.


<Layout width={'100%'} height={'100%'}>
  <SplitPane split="vertical" minSize={50} allowResize={true}>
    <Flex align={'center'} justify={'center'} height={'100%'}>
      Left Pane Content
    </Flex>
    <Flex align={'center'} justify={'center'} height={'100%'}>
      Center Pane Content
    </Flex>
    <Flex align={'center'} justify={'center'} height={'100%'}>
      Right Pane Content
    </Flex>
  </SplitPane>
</Layout>

Horizontal Split

Creating a horizontal split layout.


<Layout width={'100%'} height={'100%'}>
  <SplitPane split="horizontal" minSize={50} allowResize={true}>
    <Flex align={'center'} justify={'center'} height={'100%'}>
      Top Pane Content
    </Flex>
    <Flex align={'center'} justify={'center'} height={'100%'}>
      Bottom Pane Content
    </Flex>
  </SplitPane>
</Layout>

Nested Panes

Nesting split panes to create complex layouts.


<Layout width={'100%'} height={'100%'}>
  <SplitPane split="vertical" minSize={50} allowResize={true}>
    <Flex align={'center'} justify={'center'} height={'100%'}>
      Left Pane
    </Flex>
    <SplitPane split="horizontal">
      <Flex align={'center'} justify={'center'} height={'100%'}>
        Top Right Pane
      </Flex>
      <Flex align={'center'} justify={'center'} height={'100%'}>
        Bottom Right Pane
      </Flex>
    </SplitPane>
  </SplitPane>
</Layout>

Disabling Resize

Disabling the resize functionality.


<Layout width={'100%'} height={'100%'}>
  <SplitPane split="vertical" minSize={50} allowResize={false}>
    <Flex align={'center'} justify={'center'} height={'100%'}>
      Left Pane Content
    </Flex>
    <Flex align={'center'} justify={'center'} height={'100%'}>
      Right Pane Content
    </Flex>
  </SplitPane>
</Layout>

API

Props

SplitPane

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`split`	`'vertical' \| 'horizontal'`	`-`	Yes
`allowResize`	`boolean`	`true`	Yes
`minSize`	`number`	`50`	-
`color`	`ThemeAccentColor`	-	-

Section

Button