Splitter

A component that divides your interface into resizable sections.

Demo

React

OrientationHorizontalVertical

Panel A

Panel B

Vue

OrientationHorizontalVertical

Panel A

Panel B

Usage

React

import { Splitter } from '@fintech-sandpit/ui/react';

return (
  <Splitter.Root panels={[{ id: 'a' }, { id: 'b' }]}>
    <Splitter.Panel id="a">
      Panel A
    </Splitter.Panel>

    <Splitter.ResizeTrigger id="a:b" />

    <Splitter.Panel id="b">
      Panel B
    </Splitter.Panel>
  </Splitter.Root>
);

Vue

<script setup lang="ts">
import { Splitter } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Splitter.Root :panels="[{ id: 'a' }, { id: 'b' }]">
    <Splitter.Panel id="a">
      Panel A
    </Splitter.Panel>

    <Splitter.ResizeTrigger id="a:b" />

    <Splitter.Panel id="b">
      Panel B
    </Splitter.Panel>
  </Splitter.Root>
</template>

Props

Splitter Root Props

React

Name	Type	Required	Default	Description
panels	SplitterPanel[]	Yes	—	Panels configuration
orientation	Orientation		horizontal	Splitter orientation
defaultSize	number[]		—	Default size for each panel, %
size	number[]		—	Controlled size for each panel, %

Vue

Name	Type	Required	Default	Description
panels	SplitterPanel[]	Yes	—	Panels configuration
orientation	Orientation		horizontal	Splitter orientation
default-size	number[]		—	Default size for each panel, %
size	number[]		—	Controlled size for each panel, %

Splitter Panel Props

Name	Type	Required	Default	Description
id	string	Yes	—	Unique identifier of the panel

Splitter Resize Trigger Props

Name	Type	Required	Default	Description
id	string	Yes	—	Pair of panel identifiers delimited by a colon (e.g. panel1-id:panel2-id)
aria-label	string		Resize	Accessible label for the resize trigger

Types

type Orientation = 'horizontal' | 'vertical'
type SplitterPanel = {
  id: string;
}
type SplitterResizeTrigger = {
  id: `${SplitterPanel['id']}:${SplitterPanel['id']}`
};